jQueryのチェックボックスのチェックボックス操作するスキルの概要---設定がなど、チェックするかどうかを判断するために、選択された値を取得し、未チェックチェックします
A、属性の定義を確認し
、属性に入力タグを確認し理解するために:
1、HTMLの<input>がチェック属性
◆定義と使用法
checked属性は、ブール属性です。
ロードされたページは、<input>要素を事前に選択する必要があるときに指定した属性を確認しました。
<input type = "チェックボックス">との<input type = "ラジオ">に適したプロパティをチェックしました。
プロパティは、ページがロードされた後、確認されたJavaScriptコードによって設定することができます。
4.01とHTML5◆HTMLとの違い
なし。
◆HTMLとXHTMLの違い
XHTMLでは、属性の最小化を禁止、checked属性を定義する必要があります。<入力がチェック=「確認」/>。
この記事の範囲は、後にjQuery1.6 +またはであり、今のjQuery 3.2.1(2018年1月4日)に持っています!。開発1.11以降が推奨されます。
第二に、確認された属性の使用は
注意:動作をチェックし、無効にすると、選択したプロパティは、強制方法が支えるのみ推奨されます()!!ATTR()メソッドを使用しないでください。
1は、jQueryのチェックを選択した3つの方法かどうかが決定されます。
.ATTR( '確認')//戻り値: "確認"または"未定義";
.prop( '確認')// trueを返します/にfalseに
.is( ':チェックする')//戻り値は真/偽の//を忘れないでくださいコロンああ
2、jQueryのは、いくつかの書き込みの割り当てをチェックします:
すべてのjQueryのバージョン割り当てを行うことができ、使用attrのにはお勧めしません():
$( "#のCB1")のattr ( "確認"、 "確認");. // 一般的な方法は、私たちはお勧めしません
$( "#のCB1")のattrを ( "にチェック"、true)を;. // 標準ではありません、お勧めできません
。$( "#のCB1")のattrを( "真"、 "確認"); // 標準ではない、お勧めしません
割り当て(以下の文言を推奨)の小道具jQueryの()を4種類:
$(「#CB1 ").prop("、」にチェック真); // 標準文言、それが推奨されます!
$( "#のCB1")プロプ ({チェック:真});. //マップのキーと値のペア
。$( "#のCB1")プロプ( "チェック"機能(){
trueに戻り、関数リターン真//またはfalseに
)};
//$("#cb1").prop("checked","checked「); //非標準
第三には、ラベルを確認=すでに「確認」が、解決策は、ダニが表示されません
Webプロジェクトを行う際に、機能を実行する、である、ときチェック部、フルフック上のすべての役割。ただ、次のコードを使用し始めて:
チェック機能(ID、チェック){
IF(チェック){
$(ID + "").find( "INPUT [TYPE = 'チェックボックス']")ATTR(trueに、 "チェック");.
}他{
$( "" + ID).find( "INPUT [TYPE = 'チェックボックス']")ATTR(falseに、 "チェック");.
}
}
最初のパスのチェック及びキャンセルが有効であるが、第二のパスの後なしこれは、プロパティの見解を反映し、チェックプロパティは常に存在してきたが、フックを示しませんでした。見にcheckedプロパティを削除することを検討してください。
チェック機能(ID、チェック){
IF(チェック){
$(ID + "").find( "INPUT [TYPE = 'チェックボックス']")ATTR(trueに、 "チェック");.
}他{
$( 「」+挙げID上記).find()removeAttrは( 『チェック』);. 『[タイプ=『チェックボックス』の]入力が』
}
}
このプロパティが有するフック、なくなっキャンセルを確認するためにチェックが、問題はまだありません解決、または無応答の後に二度目。
しかし、私が使用したバージョン1.11を持って、正しいアプローチは小道具()メソッドは、チェックボックスがチェックされているプロパティの値を設定し、使用することです。
チェック機能(ID、チェック){
IF(チェック){
$(ID + "").find( "INPUT [TYPE = 'チェックボックス']")プロプ(trueに、 "チェック");.
}他{
$( "" + ID).find( "INPUT [TYPE = 'チェックボックス']")プロプ(falseに、 "チェック");.
}
}
問題の性質が中にjQueryの()と支柱attrに、発生することがあります() 2つの方法の間の違いを利用し。
詳細については、を参照してください。
jQueryのATTR()と支柱()セットのプロパティに、特性差を得る - chunlynnコテージ - CSDNのブログ
http://blog.csdn.net/chenchunlin526/article/details/77426796
四、jQueryの動作チェックボックスのスキルの概要
図1に示すように、単一の選択された項目のチェックボックスの値(書き込みの3種類)を得ます
$( "#のchx1")を見つける。( "入力:チェックボックス:チェックする")。valを()
//或者
$( "#のchx1")( "入力:[タイプ= 'チェックボックス']:チェックする")を見つけます。ヴァル();
$( "#のchx1")を見つける( "入力[タイプ= 'チェックボックス']:チェックする")のval();。。
//或者
$( "#のchx1")( "入力:[名= 'CK']:チェックする")を見つける。。のval();
$( "#のchx1")を見つける( "入力[名前= 'CK']:チェックする")のval();。。
2、获取多个チェックボックス选中项
$( "#のCHK1")を見つける ...( '入力:チェックボックス')を各(関数(){// すべてのチェックボックスをループ
真のIF($(この).propを( '確認')==){
コンソール。ログ($(この).val( )); //現在選択された印刷のチェックボックスの値
}
});
機能getCheckBoxVal(){//すべての値を取得し、選択さjQueryのチェックボックス
のvar chk_value = [];
。$( "#のCHK1") ( '入力[NAME = "テスト"]:チェック')を見つける各(関数(){// 。配列に反復、すべての選択された値を
chk_value.push($(この).val());
});
警告(chk_value.length == 0 'あなたは何も選択していない!' :? chk_value);
}
3は、最初のチェックボックスの値をチェックされているセット
。$( "#CHK1")、検索( 'INPUT:チェックボックス:まず')小道具(trueに、 "確認");.
//または
$( "#のCHK1")を見つける ...( '入力:チェックボックス')EQ( 0).prop(trueに、「チェック」);
4は、最後に設定された値をチェックボックスで選択されて
$(「#CHK1」)を見つける...(「INPUT:チェックボックス:ラスト」)小道具(trueに、「確認」);
5、インデックス値選択したチェックボックスとして任意の値の設定に応じて。
.. $( "#のCHK1" )を見つける( '入力:チェックボックス')EQ( インデックス値).prop(真、 '確認' ); // インデックス= 0,1,2 ....
//または
$ ( "#のCHK1は")を見つける( 'は、入力:チェックボックスを')のスライスを(1,2).prop(真、 '確認'); // また、0番目と1番目のチェックボックスを選択します。..
//インデックス0から始まります(包括的)、指数2(含まれていない)チェックボックスに
図6、値チェックボックスの値に基づいて、選択された設定値について
.. $( "#CHK1")検索:小道具(trueに、 '確認');( "INPUTチェックボックス[値を=」1' ]")
$( "#CHK1")(「INPUT [タイプ= 'チェックボックス検索。 「] [値=」1 trueに、 『チェック);」]「)プロプ(』
7、削除チェックボックス:①値=チェックボックス②1つの削除削除最初のいくつかのチェックボックス
$( "#のCHK1")を見つける ..( "入力:チェックボックス[値= '1']")のremove(); // DOMからマッチング要素、ページからタグを削除する
$(「#CHK1を").find("入力:チェックボックス ")EQ(インデックス).remove(); // インデックス= 0,1,2 ....インデックス。
//チェックボックスとして最初の3削除:
$(" #CHK1を").find(" INPUT :.チェックボックス「)EQ(2).remove();
8、全てまたはオフすべて選択
( ':CheckBoxのINPUT')各(関数(){.. $( "#のCHK1は")検索
$(この).propを(trueに、 '確認');
});
//または
$( "#のCHK1") .find( 'INPUT:チェックボックス')それぞれ(関数(){
$(この).prop(falseに、 'チェック');
});
9、すべての偶数または奇数選択。
$( "#のCHK1")を検索 ...( "入力[タイプ= 'チェックボックス']:でも")小道具(真、 "確認"); // でも、すべての選択
$( "#のCHK1")。 (「入力を見つけます[TYPE = 'チェックボックス']:奇数)真、「チェック; // ")プロプ(" 全ての奇数選択
10を、選択されていません
この方法の一つ:
$( "#のbtn4")。クリックしてください(関数(){
$( "入力[タイプ= 'チェックボックス']")。各(関数(){//反选
場合($(この).propが( "チェックします") ){
$(この).prop( "確認"、偽);
}他{
$(この).prop(真、 "確認");
}
});
});
方法二:
$( "#のbtn4")。ON( 'クリック'、機能(){
//反転は、すべてのチェックボックス(選択選択変更していない、変更されたチェックを外しを選択)
$( "#CHK1")。検索( "INPUT [TYPE = 'チェックボックス']")プロプ( "チェック"機能(インデックス、OLDVALUEは){。
;! OLDVALUEを返します
});
}