您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

javascript中CheckBox全选终极方案

作者:佚名    责任编辑:admin    更新时间:2022-06-22

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

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

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

  ?

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

  下面就是js脚本了

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

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 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 选中的个数 这个在用来判断 是否有勾选时非常有用。

  ?

1 2 3 4 5 6 7 8 9 10 11 12 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; }

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