javascript中CheckBox全选终极方案
2015-05-20 00:00
477 查看
在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等
下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 。
下面就是js脚本了
checkAll方法是实现CheckBox的全选和取消全选的。
checkSelectNo 函数是用来获取 所有checkbox 选中的个数 这个在用来判断 是否有勾选时非常有用。
以上所述就是本文的全部内容了,希望大家能够喜欢。
下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 。
<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的全选和取消全选的。
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; }
以上所述就是本文的全部内容了,希望大家能够喜欢。
相关文章推荐
- javascript中CheckBox全选终极方案
- CheckBox全选终极方案
- CheckBox全选终极方案
- checkbox 全选终极方案
- CheckBox全选终极方案
- JavaScript学习笔记之js实现复选框checkbox的全选、反选示例
- Javascript实现CheckBox的全选与取消全选的代码
- (javascript,treeview)treeview通过checkbox来进行全选单选
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- checkbox的全选与取消全选的javascript代码及示例
- 新手学JavaScript(四)----CheckBox全选与全不选
- javascript实现datagrid客户端checkbox列的全选,反选
- javascript实现checkBox的全选,反选与赋值
- Javascript 控制 CheckBox 的全选与取消全选
- javaScript checkbox 全选/反选及批量删除
- 【javascript】checkbox——类似邮箱全选功能
- 【javascript】checkbox——类似邮箱全选功能(完整版)
- html,javaScript中怎么控制复选框checkbox的全选,全不选,以及全选中,全选按钮选中,其中一个或者多个没选,则全选按钮不被选中
- GridView中CheckBox实现全选与反选的Javascript脚本
- 表单javascript checkbox全选 反选 全不选