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庫文件:

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

jQuery

1、全選或全不選,。當勾選全選按鈕#selectAll旁邊的復選框#all時,，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態(tài),。

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

2,、全選。當點擊全選按鈕#selectAll或者勾選全選按鈕旁邊的復選框#all時,，列表中所有的選項都會被選中,，包括全選旁邊的復選框也是選中狀態(tài)。

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

3、全不選,。當點擊全不選按鈕#unSelect時,，列表中所有的選項都是未選中狀態(tài)，當然包括#all也是未選中狀態(tài),。

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

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

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

上述代碼中遍歷了選項列表,，然后改變checked屬性，調用函數(shù)allchk()是干什么的,，別急,，留在后面介紹。

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

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

為了完善選中選項功能,，我們在單擊列表中某個選項時，如果勾選的項剛好滿足全部選中的條件,，則#all也要相應的變?yōu)檫x中狀態(tài),，同樣，如果事先所有的選項是選中狀態(tài)時,，當取消勾選某個選項時,，那么#all也要相應的變?yōu)槲催x中狀態(tài)。

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

函數(shù)allchk()就是用來檢測全選框#all應該是選中狀態(tài)還是未選中狀態(tài)的,，請看代碼,。

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

總結

jQuery操作復選框的選中和不選中狀態(tài)非常簡單，使用attr()來設置"checked"屬性的值,，true未選中,，false為未選中，在整個全選,、反選過程中注意處理全選復選框的選中狀態(tài),，以及獲取選中選項的值,。以下我將所有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();//選項總個數(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); 
    } 
}