javascript中CheckBox全选终极方案

在javascript页面中实现CheckBox或者Radio的选中状态是一件很容易的事情，下面我们来给大家展示下在asp.net中使用javascript中CheckBox全选终极方案，有需要的小伙伴可以参考下。

在我们的程序开发中经常会要用到CheckBox的全选，通常情况下是在一些数据绑定控件中如Gridview等

下面以Repeater为例，在Repeater的header 和item中放入CheckBox控件 。

1. <asp:Repeater ID="rptGroup" runat="server">  
2. <HeaderTemplate>  
3. <table width="100%" cellspacing="1" > 
4. <tr>  
5. <td width="3%" align="center" > 
6. <input type="checkbox" id="chkAll" name="chkAll" value="checkbox" 
7. onclick="checkAll ('chkAll',this);" />  
8. </td>  
9. </tr>  
10. </HeaderTemplate>  
11. <ItemTemplate>  
12. <tr>  
13. <td align="center" > 
14. <input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>' 
15. onclick="checkAll('chkAll',this);"/> 
16. </td>  
17. </tr>  
18. </ItemTemplate>  
19. <FooterTemplate>  
20. </table>  
21. </FooterTemplate>  
22. </asp:Repeater>  

下面就是js脚本了

checkAll方法是实现CheckBox的全选和取消全选的。

1. function checkAll(chkAllID, thisObj) { 
2. var chkAll = document.getElementById(chkAllID); 
3. var chks = document.getElementsByTagName("input"); 
4. var chkNo = 0; 
5. var selectNo = 0; 
6. for (var i = 0; i < chks.length; i++) { 
7. if (chks[i].type == "checkbox") { 
8. //全选触发事件  
9. if (chkAll == thisObj) { 
10. chks[i].checked = thisObj.checked; 
11. } 
12. //非全选触发  
13. else { 
14. if (chks[i].checked && chks[i].id != chkAllID) 
15. selectNo++; 
16. } 
17. if (chks[i].id != chkAllID) { 
18. chkNo++; 
19. } 
20. } 
21. } 
22. if (chkAll != thisObj) { 
23. chkAll.checked = chkNo == selectNo; 
24. } 
25. }  

checkSelectNo 函数是用来获取 所有checkbox 选中的个数 这个在用来判断 是否有勾选时非常有用。

1. function checkSelectNo(chkAllID) { 
2. var chks = document.getElementsByTagName("input"); 
3. var selectNo = 0; 
4. for (var i = 0; i < chks.length; i++) { 
5. if (chks[i].type == "checkbox") { 
6. if (chks[i].id != chkAllID && chks[i].checked) { 
7. selectNo++; 
8. } 
9. } 
10. } 
11. return selectNo; 
12. }  

以上所述就是本文的全部内容了，希望大家能够喜欢。