javascript中CheckBox全选终极方案
在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等
下面以Repeater为例,在Repeater的header和item中放入CheckBox控件。
<asp:RepeaterID="rptGroup"runat="server"> <HeaderTemplate> <tablewidth="100%"cellspacing="1"> <tr> <tdwidth="3%"align="center"> <inputtype="checkbox"id="chkAll"name="chkAll"value="checkbox" onclick="checkAll('chkAll',this);"/> </td> </tr> </HeaderTemplate> <ItemTemplate> <tr> <tdalign="center"> <inputtype="checkbox"name="chkSelect"value='<%#Eval("ID")%>' onclick="checkAll('chkAll',this);"/> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater>
下面就是js脚本了
checkAll方法是实现CheckBox的全选和取消全选的。
functioncheckAll(chkAllID,thisObj){ varchkAll=document.getElementById(chkAllID); varchks=document.getElementsByTagName("input"); varchkNo=0; varselectNo=0; for(vari=0;i<chks.length;i++){ if(chks[i].type=="checkbox"){ //全选触发事件 if(chkAll==thisObj){ chks[i].checked=thisObj.checked; } //非全选触发 else{ if(chks[i].checked&&chks[i].id!=chkAllID) selectNo++; } if(chks[i].id!=chkAllID){ chkNo++; } } } if(chkAll!=thisObj){ chkAll.checked=chkNo==selectNo; } }
checkSelectNo函数是用来获取所有checkbox选中的个数这个在用来判断是否有勾选时非常有用。
functioncheckSelectNo(chkAllID){ varchks=document.getElementsByTagName("input"); varselectNo=0; for(vari=0;i<chks.length;i++){ if(chks[i].type=="checkbox"){ if(chks[i].id!=chkAllID&&chks[i].checked){ selectNo++; } } } returnselectNo; }
以上所述就是本文的全部内容了,希望大家能够喜欢。