ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryは単純な全選択と逆選択関数を実装します_jquery

jqueryは単純な全選択と逆選択関数を実装します_jquery

WBOYオリジナル: 2016-05-16 15:22:24998ブラウズ

まず簡単な例を見てみましょう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>  <script type="text/javascript">
    $(function() {
      $("#checkAll").click(function() {
        $('input[name="subBox"]').attr("checked",this.checked); 
      });
      var $subBox = $("input[name='subBox']");
      $subBox.click(function(){
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length &#63; true : false);
      });
    });
  </script>
 
</head>
<body>
  <div>
    <input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" />项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4
  </div>
</body>
</html>

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

jquery ライブラリの紹介

<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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); 
  } 
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript は入力ファイルのアップロード画像プレビュー効果を実装します_javascript スキル次の記事：JavaScript は入力ファイルのアップロード画像プレビュー効果を実装します_javascript スキル

続きを見る

jqueryは単純な全選択と逆選択関数を実装します_jquery

関連記事