在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. }  

以上所述就是本文的全部內容了，希望大家能夠喜歡。