jquery實(shí)現(xiàn)簡(jiǎn)單的全選和反選功能

更新時(shí)間：2016年01月02日 16:22:04 投稿：hebedich

我們?cè)谧鲰?xiàng)目的時(shí)候，經(jīng)常需要實(shí)現(xiàn)全選和反選功能，到網(wǎng)上搜了一圈，發(fā)現(xiàn)網(wǎng)上寫的全選的代碼，不是完整的，是有bug的。下面結(jié)合自己的項(xiàng)目給大家分享下。

首先我們看個(gè)簡(jiǎn)單的實(shí)例

<!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實(shí)現(xiàn)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 ? true : false);
      });
    });
  </script>
 
</head>
<body>
  <div>
    <input id="checkAll" type="checkbox" />全選
    <input name="subBox" type="checkbox" />項(xiàng)1
    <input name="subBox" type="checkbox" />項(xiàng)2
    <input name="subBox" type="checkbox" />項(xiàng)3
    <input name="subBox" type="checkbox" />項(xiàng)4
  </div>
</body>
</html>

下面再給大家分享一段基于jQuery實(shí)現(xiàn)checkbox列表全選、反選和不選功能的代碼，適用于網(wǎng)頁(yè)多選后需要進(jìn)行批量操作的場(chǎng)景（如批量刪除等）。文章結(jié)合實(shí)例，代碼簡(jiǎn)潔，基本覆蓋選項(xiàng)選擇操作的方方面面，希望可以幫到有需要的前端開發(fā)愛好者。

引入jquery庫(kù)

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

構(gòu)建HTML

一般從數(shù)據(jù)庫(kù)讀出來(lái)的列表都需要批量選中以便刪除與編輯等，下面我們就來(lái)模擬下，實(shí)現(xiàn)復(fù)選框checkbox的全選與不選，先建立html

<ul id="list">  
  <li><label><input type="checkbox" value="1"> 1.我是記錄來(lái)的呢</label></li> 
  <li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li> 
  <li><label><input type="checkbox" value="3"> 3.愛上你是我的錯(cuò)嗎？</label></li> 
  <li><label><input type="checkbox" value="4"> 4.從開始你就不應(yīng)用愛上我</label></li> 
  <li><label><input type="checkbox" value="5"> 5.喜歡一個(gè)人好難</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、全選或全不選。當(dāng)勾選全選按鈕#selectAll旁邊的復(fù)選框#all時(shí)，列表中的選項(xiàng)全部選中，反之取消勾選則列表中的選項(xiàng)全部為未選中狀態(tài)。

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

2、全選。當(dāng)點(diǎn)擊全選按鈕#selectAll或者勾選全選按鈕旁邊的復(fù)選框#all時(shí)，列表中所有的選項(xiàng)都會(huì)被選中，包括全選旁邊的復(fù)選框也是選中狀態(tài)。

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

3、全不選。當(dāng)點(diǎn)擊全不選按鈕#unSelect時(shí)，列表中所有的選項(xiàng)都是未選中狀態(tài)，當(dāng)然包括#all也是未選中狀態(tài)。

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

4、反選。當(dāng)點(diǎn)擊反選按鈕#reverse，列表中所有被選中的選項(xiàng)變?yōu)槲催x中狀態(tài)，而所有未選中的選項(xiàng)變?yōu)橐堰x中狀態(tài)，當(dāng)然也要注意#all的狀態(tài)。

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

代碼中遍歷了選項(xiàng)列表，然后改變checked屬性，最后調(diào)用函數(shù)allchk()，后面將介紹該函數(shù)。

5、獲得選中的所有值。我們要跟后臺(tái)程序交互就必須獲取列表中所選項(xiàng)的值，我們通過遍歷數(shù)組，將選中項(xiàng)的值存放在數(shù)組中，最后組成由逗號(hào)(,)隔開的字符串，開發(fā)者就可以通過獲取這個(gè)字符串進(jìn)行相應(yīng)的操作了。

$("#getValue").click(function(){ 
  var valArr = new Array; 
  $("#list :checkbox[checked]").each(function(i){ 
    valArr[i] = $(this).val(); 
  }); 
  var vals = valArr.join(',');//轉(zhuǎn)換為逗號(hào)隔開的字符串 
  alert(vals); 
});

為了完善選中選項(xiàng)功能，我們?cè)趩螕袅斜碇心硞€(gè)選項(xiàng)時(shí)，如果勾選的項(xiàng)剛好滿足全部選中的條件，則#all也要相應(yīng)的變?yōu)檫x中狀態(tài)，同樣，如果事先所有的選項(xiàng)是選中狀態(tài)時(shí)，當(dāng)取消勾選某個(gè)選項(xiàng)時(shí)，那么#all也要相應(yīng)的變?yōu)槲催x中狀態(tài)。

//設(shè)置全選復(fù)選框 
$("#list :checkbox").click(function(){ 
  allchk(); 
});

函數(shù)allchk()就是用來(lái)檢測(cè)全選框#all應(yīng)該是選中狀態(tài)還是未選中狀態(tài)的，請(qǐng)看代碼。

function allchk(){ 
  var chknum = $("#list :checkbox").size();//選項(xiàng)總個(gè)數(shù) 
  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); 
  } 
}

總結(jié)

jQuery操作復(fù)選框的選中和不選中狀態(tài)非常簡(jiǎn)單，使用attr()來(lái)設(shè)置"checked"屬性的值，true未選中，false為未選中，在整個(gè)全選、反選過程中注意處理全選復(fù)選框的選中狀態(tài)，以及獲取選中選項(xiàng)的值。以下我將所有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(); 
  }); 
   
  //設(shè)置全選復(fù)選框 
  $("#list :checkbox").click(function(){ 
    allchk(); 
  }); 
  
  //獲取選中選項(xiàng)的值 
  $("#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();//選項(xiàng)總個(gè)數(shù) 
  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); 
  } 
}

您可能感興趣的文章: