checkbox jQuery實現的全選、反選和不選功能

參考文章：http://www.runoob.com/try/try.php?filename=tryjquery_html_prop_attr

      http://www.runoob.com/jquery/html-prop.html

原文地址： http://www.helloweba.com/view-blog-254.html 

先看下attr和prop的區別

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.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQuery

1、全選或全不選。當勾選全選按鈕#selectAll旁邊的複選框#all時，列表中的選項全部選中，反之取消勾選則列表中的選項全部爲未選中狀態。

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

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

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

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

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

4、反選。當點擊反選按鈕#reverse，列表中所有被選中的選項變爲未選中狀態，而所有未選中的選項變爲已選中狀態，當然也要注意#all的狀態。

$("#reverse").click(function () { 
    $("#list :checkbox").each(function () {  
        $(this).prop("checked", !$(this).prop("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).prop("checked")==true){
			chk++;
		}
    });
	if(chknum==chk){//全選
		$("#all").prop("checked",true);
	}else{//不全選
		$("#all").prop("checked",false);
	}
}

總結

jQuery操作複選框的選中和不選中狀態非常簡單，使用attr()來設置"checked"屬性的值，true未選中，false爲未選中，在整個全選、反選過程中注意處理全選複選框的選中狀態，以及獲取選中選項的值。以下我將所有jQuery代碼整理在一起，供大家參考。

$(function () {
	//全選或全不選
	$("#all").click(function(){   
    	if(this.checked){   
        	$("#list :checkbox").prop("checked", true);  
    	}else{   
		$("#list :checkbox").prop("checked", false);
    	}   
 	}); 
	//全選  
    $("#selectAll").click(function () {
         $("#list :checkbox,#all").prop("checked", true);  
    });  
	//全不選
    $("#unSelect").click(function () {  
         $("#list :checkbox,#all").prop("checked", false);  
    });  
    //反選 
    $("#reverse").click(function () { 
         $("#list :checkbox").each(function () {  
              $(this).prop("checked", !$(this).prop("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).prop("checked")==true){
			chk++;
		}
    });
	if(chknum==chk){//全選
		$("#all").prop("checked",true);
	}else{//不全選
		$("#all").prop("checked",false);
	}
}