JQuery實現的 checkbox 全選、反選。

標籤：div   name   tools   views   http   java   htm   selectall   mod   

 

1. 全選的checkbox選中時，子checkbox全部選中。反之，全部不選

2.子checkbox中，只要有沒有被選中的，取消全選checkbox的選中

3.子checkbox的數量和子checkbox被選中的數量一樣時，全選checkbox要被選中

[javascript] view plain copy 

1. //複選框事件  
2. //全選、取消全選的事件  
3. function selectAll(){  
4.     if ($("#SelectAll").attr("checked")) {  
5.         $("input[name=‘subcheck‘]").attr("checked", true);  
6.     } else {  
7.         $(":checkbox").attr("checked", false);  
8.     }  
9. }  
10. //子複選框的事件  
11. function setSelectAll(){  
12.     //當沒有選中某個子複選框時，SelectAll取消選中  
13.     if (!$("#subcheck").checked) {  
14.         $("#SelectAll").attr("checked", false);  
15.     }  
16.     var chsub = $("input[type=‘checkbox‘][name=‘subcheck‘]").length; //擷取subcheck的個數  
17.     var checkedsub = $("input[type=‘checkbox‘][name=‘subcheck‘]:checked").length; //擷取選中的subcheck的個數  
18.     if (checkedsub == chsub) {  
19.         $("#SelectAll").attr("checked", true);  
20.     }  else{
21.         $("#SelectAll").attr("checked", false);}
22. }  

全選checkbox的id是SelectAll，子checkbox的name是subcheck.

 

JSP頁面代碼如下：

 

[html] view plain copy 

1. <input type="checkbox" id="SelectAll"  value="全選" onclick="selectAll();"/>  
2.   
3. <input type="checkbox" name="subcheck[]"  value="1" onclick="setSelectAll();"/>  
4. <input type="checkbox" name="subcheck[]"  value="2" onclick="setSelectAll();"/>  
5. <input type="checkbox" name="subcheck[]"  value="3" onclick="setSelectAll();"/>  
6. <input type="checkbox" name="subcheck[]"  value="4" onclick="setSelectAll();"/>  

 

 

JQuery實現的 checkbox 全選、反選。