javascript中CheckBox全选终极方案

   在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;
}

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

时间: 2025-01-02 19:01:29

javascript中CheckBox全选终极方案的相关文章

javascript中CheckBox全选终极方案_javascript技巧

在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等 下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 . <asp:Repeater ID="rptGroup" runat="server"> <HeaderTemplate> <table width="100%" cellspacing="1&quo

jquery中checkbox全选失效的解决方法_jquery

如果你使用jQuery 1.6 ,代码if ( $(elem).attr("checked") ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值.推荐使用上述方法之一,来取得 checked 的值. 使用jQu

javascript实现checkbox全选的代码_javascript技巧

代码: function checkall(checkNames){ var allBoxs = document.getElementsByName(checkNames); for(var i = 0 ;i<allBoxs.length;i++){ if(allBoxs[i].type == 'checkbox'){ if(allBoxs[i].checked==false){ allBoxs[i].checked = true ; }else{ allBoxs[i].checked = f

javascript实现checkbox全选的代码

  本文给大家分享的是js实现checkbox的全选的代码,在网页制作中很常用的js代码,供大家学习参考. 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 function checkall(checkNames){ var allBoxs = document.getElementsByName(checkNames); for(var i = 0 ;i<allBoxs.length;i++){ if(allBoxs[i].type == 'checkbox'){ if(al

repeater 中checkbox全选问题

问题描述 前几天,发了个同样的问题,暂时解决了,可以实现选中删除,但是现在的问题是:明明全部选定了,执行删除的时候,只删除第一行的值,下面的checkbox值变成false了 <ItemTemplate><tr><tdalign="center"><asp:CheckBoxID="cb_id"CssClass="checkall"runat="server"/></td&g

新手学JavaScript(四)----CheckBox全选与全不选

    前两天开发界面时,实现了一个新的小功能,CheckBox复选框的全选与全不选 样式的实现 纯CSS实现 VS JQuery+CSS实现     在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所以就另找了一个插件,这里大家可能会有疑问,为什么要找一个纯CSS实现的CheckBox?     在这里给大家解释一下,如果说你找的Checkbox是用CSS+Javascript实现的话,

实现checkbox全选、反选、取消JavaScript小脚本异常_javascript技巧

今天在实现checkbox全选,反选,取消JavaScript小脚本的时候,总是出现点击后页面瞬间刷新,选择的checkbox全部取消的问题,debug了半天,才发现原来是<button>标签中少写了一个type属性的原因,郁闷啊,希望自己以后少犯这种特别2的错误,特此记录. 复制代码 代码如下: <!-- 以下为错误写法 --> <button name="checkAll" value="全选" class="checkB

javascript使用avalon绑定实现checkbox全选

  checkbox全选应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢? duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅.下面随便演示一个常见的checkbox全选. 要求:(老掉牙了,还是说一下) 1.勾选了全选框后,下面的子选框全被勾选;没勾选全选框,则子选框全部不

javaScript checkbox全选全不选的问题

问题描述 javaScript checkbox全选全不选的问题 我想用JavaScript做一个全选全不选的效果,但是我在点击全选按钮的时候没有任何反应. 运行结果: 求大腿.... 解决方案 click()方法换个名字,可能和js的名字冲突了 解决方案二: checkbox全选全不选checkBox全选全不选checkbox全选全不选 解决方案三: 进函数了吗???函数里面得到的oinput长度是多少??调试应该就能找出问题吧