jquery實作簡單的全選和反選功能_jquery-js教程-PHP中文網

首先我們來看個簡單的實例

<!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實作checkbox清單全選、反選和不選功能的程式碼，適用於網頁多選後需要進行批次操作的場景（如大量刪除等）。文章結合實例，程式碼簡潔，基本覆蓋選項選擇操作的各個方面，希望可以幫到有需要的前端開發愛好者。

引入jquery庫

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

登入後複製

建構HTML

一般從資料庫讀出來的清單都需要批次選取以便刪除與編輯等，下面我們就來模擬下，實作複選框checkbox的全選與不選，先建立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操作複選框的選中和不選中狀態非常簡單，使用attr()來設定"checked"屬性的值，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); 
  } 
}

登入後複製