checkbox 全选终极方案

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

 

下面以repeater 为例，在repeater的header 和item中放入checkbox控件

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

 

下面就是js脚本了

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

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

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

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