jQuery_html/css_WEB-ITnose によって実装されるすべて選択、選択の反転、および選択解除の機能-htmlチュートリアル-php.cn

jQuery_html/css_WEB-ITnose によって実装されるすべて選択、選択の反転、および選択解除の機能

WBOY

リリース： 2016-06-24 12:01:38

オリジナル

1108 人が閲覧しました

Web ページ上で複数の選択を行った後にバッチ操作が必要なシナリオ (バッチ削除など) に適しています。ご質問がございましたら、修正していただければと思います。ありがとう~~

HTML

私たちのページには、ユーザーが選択できる一致するチェックボックスを備えた複数行の曲名をリストした曲リストがあり、リストの下にはアクションボタンの行があります

<ul id="list">      <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>    <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>    <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>    <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>    <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>    <li><label><input type="checkbox" value="6"> 6.喜欢?</label></li> </ul> <input type="checkbox" id="all"> <input type="button" value="全选" class="btn" id="selectAll">   <input type="button" value="全不选" class="btn" id="unSelect">   <input type="button" value="反选" class="btn" id="reverse">   <input type="button" value="获得选中的所有值" class="btn" id="getValue">

ログイン後にコピー

もちろんです忘れないでください。まず jQuery ライブラリファイルをロードします:

jQuery Baidu CDN

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

ログイン後にコピー

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

ログイン後にコピー

Jquery支持的版本有:2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

ログイン後にコピー

jQuery

1. すべてを選択するか、何も選択しません。 [すべて選択] ボタン #selectAll の横にあるチェックボックス #all がオンになっている場合、リスト内のすべてのオプションが選択されています。それ以外の場合、チェックされていない場合は、リスト内のすべてのオプションがオフになります。

rree

2. すべてを選択します。 [すべて選択] ボタン #selectAll をクリックするか、[すべて選択] ボタンの横にあるチェックボックス #all をオンにすると、[すべて選択] の横にあるチェックボックスを含む、リスト内のすべてのオプションが選択されます。

いいえ

3. 何も選択しません。 #unSelect ボタンをクリックすると、#all を含むリスト内のすべてのオプションの選択が解除されます。

うわー

4. #reverse ボタンをクリックすると、リスト内で選択されているすべてのオプションが選択解除され、選択されていないすべてのオプションが選択されます。もちろん、#all のステータスにも注意する必要があります。

$("#all").click(function(){        if(this.checked){            $("#list :checkbox").attr("checked", true);       }else{            $("#list :checkbox").attr("checked", false);     }    });

ログイン後にコピー

上記のコードはオプションリストを走査し、checked 属性を変更して関数 allchk() を呼び出します。これについては後ほど説明しますので、ご安心ください。

5. 選択した値をすべて取得します。バックグラウンドプログラムと対話したい場合は、リスト内で選択された項目の値を取得し、配列を走査し、選択された項目の値を配列に格納し、最後にカンマ (,) で区切られた文字列を形成する必要があります。開発者は、この文字列に対して対応する操作を実行できます。

$("#selectAll").click(function () {    $("#list :checkbox,#all").attr("checked", true);   });

ログイン後にコピー

選択されたオプションの機能を改善するために、リスト内のオプションをクリックすると、チェックされた項目が選択されたすべての条件を満たしている場合、同様に、すべてのオプションが選択された場合、それに応じて #all も選択されます。 , オプションのチェックが外されると、それに応じて #all のチェックも外されます。

$("#unSelect").click(function () {      $("#list :checkbox,#all").attr("checked", false);   });

ログイン後にコピー

関数 allchk() は、全選択ボックス #all が選択されるべきか選択解除されるべきかを検出するために使用されます。コードを参照してください。

$("#reverse").click(function () {      $("#list :checkbox").each(function () {           $(this).attr("checked", !$(this).attr("checked"));       });     allchk(); });

ログイン後にコピー

概要

jQuery は、attr() を使用して、チェックボックスのオンとオフの状態を非常に簡単に操作します。true はチェックされていない、false はチェックされていない、および選択範囲全体を設定します。逆選択処理中は、[すべて選択] チェックボックスの選択状態の処理と、選択されたオプションの値の取得に注意してください。以下に、参考のためにすべての jQuery コードをまとめてコンパイルしました。

$("#getValue").click(function(){     var valArr = new Array;     $("#list :checkbox[checked]").each(function(i){         valArr[i] = $(this).val();     });     var vals = valArr.join(',');//转换为逗号隔开的字符串     alert(vals); });

ログイン後にコピー

jQuery によって実装されたすべて選択、選択の反転、および選択解除の関数例:

//设置全选复选框 $("#list :checkbox").click(function(){     allchk(); });

ログイン後にコピー