jquery_jquery でチェックボックスを使用する方法の簡単な例のデモンストレーション

すべて選択、反転、チェックボックス リストの選択を解除する機能を実装する jQuery ベースのコードを共有します。これは、Web ページ上で複数の選択を行った後にバッチ操作が必要なシナリオ (バッチ削除など) に適しています。 、など）。この記事は例と簡潔なコードを組み合わせており、基本的にオプション選択操作のあらゆる側面をカバーしています。必要としているフロントエンド開発愛好家に役立つことを願っています。

jquery ライブラリの紹介
0dbf8dfc01a0104ba24c9522348b6f262cacc6d41bbb37262a98f745aa00fbf0
HTML を構築する

通常、データベースから読み込んだリストは削除や編集のために一括で選択する必要があります。最初に 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 コード

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

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

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

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

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

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

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

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

このコードはオプション リストを調べてから、checked 属性を変更し、最後に関数 allchk() を呼び出します。これについては後で紹介します。

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

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

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

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

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

function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
 $("#list :checkbox").each(function () { 
  if($(this).attr("checked")==true){ 
   chk++; 
  } 
 }); 
 if(chknum==chk){//全选 
  $("#all").attr("checked",true); 
 }else{//不全选 
  $("#all").attr("checked",false); 
 } 
}

概要

jQuery はチェックボックスのチェック済みとチェックなしの状態を非常に簡単に操作します。true はチェックされていない、false はチェックされていない、という属性の値を設定します。プロセス全体のチェックボックスのチェック状態を選択し、選択したオプションの値を取得します。以下に、参考のためにすべての jQuery コードをまとめてコンパイルしました。

$(function () { 
 //全选或全不选 
 $("#all").click(function(){ 
  if(this.checked){ 
   $("#list :checkbox").attr("checked", true); 
  }else{ 
   $("#list :checkbox").attr("checked", false); 
  } 
  }); 
 //全选 
 $("#selectAll").click(function () { 
   $("#list :checkbox,#all").attr("checked", true); 
 }); 
 //全不选 
 $("#unSelect").click(function () { 
   $("#list :checkbox,#all").attr("checked", false); 
 }); 
 //反选 
 $("#reverse").click(function () { 
   $("#list :checkbox").each(function () { 
    $(this).attr("checked", !$(this).attr("checked")); 
   }); 
   allchk(); 
 }); 
  
 //设置全选复选框 
 $("#list :checkbox").click(function(){ 
  allchk(); 
 }); 
 
 //获取选中选项的值 
 $("#getValue").click(function(){ 
  var valArr = new Array; 
  $("#list :checkbox[checked]").each(function(i){ 
   valArr[i] = $(this).val(); 
  }); 
  var vals = valArr.join(','); 
   alert(vals); 
 }); 
}); 
function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
 $("#list :checkbox").each(function () { 
  if($(this).attr("checked")==true){ 
   chk++; 
  } 
 }); 
 if(chknum==chk){//全选 
  $("#all").attr("checked",true); 
 }else{//不全选 
  $("#all").attr("checked",false); 
 } 
}

この記事を通じて、jquery でのチェックボックスの使用方法を一般的に理解し、多数の例を通じてチェックボックスの使用を上手にマスターしていただければ幸いです。