程序开发中经常会要用到checkbox的全选,通常情况下是在一些数据绑定控件中如gridview 等 。下面以repeater 为例,在repeater的header 和item中放入checkbox控件
<asp:Repeater ID="rptGroup" runat="server"> <HeaderTemplate> <table width="100%" cellspacing="1" class="tab"> <tr> <td width="3%" align="center" class="td-01"><input type="checkbox" id="chkAll" name="chkAll" value="checkbox" οnclick="checkAll(’chkAll’,this);" /> </td> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td align="center" ><input type="checkbox" name="chkSelect" value=’<%# Eval("ID") %>’ οnclick="checkAll(’chkAll’,this);"/></td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> |
下面就是js脚本了
checkAll方法是实现checkbox的全选和取消全选的
function checkAll(chkAllID,thisObj) { var chkAll = document.getElementById(chkAllID); var chks = document.getElementsByTagName("input"); var chkNo = 0; var selectNo = 0; for(var i =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 选中的个数 这个在用来判断 是否有勾选时非常有用。
function checkSelectNo(chkAllID) { var chks = document.getElementsByTagName("input"); var selectNo =0; for(var i =0; i < chks.length; i++) { if(chks[i].type == "checkbox") { if(chks[i].id != chkAllID && chks[i].checked) { selectNo++; } } } return selectNo; } |