Javascript实现CheckBox的全选与取消全选的代码

ttx9n · 发表于 2010-7-20 00:28:30

在批量处理列表数据时，往往会用到 CheckBox 的全选与取消全选，虽然她的实现原理很简单，但是对新手来说还是有些难度。本文介绍的方法，触发条件独立，可以全选或取消全选指定 name 的 CheckBox ，同一页面可以有多组供全选的 CheckBox ，功能健全，通用性较强。
效果图:

运行查看效果：

<body> 
<script type="text/javascript"> 
function checkAll(name) { 
var el = document.getElementsByTagName('input'); 
var len = el.length; 
for(var i=0; i<len; i++) { 
if((el<i>.type=="checkbox") && (el<i>.name==name)) { 
el<i>.checked = true; 
} 
} 
} 
function clearAll(name) { 
var el = document.getElementsByTagName('input'); 
var len = el.length; 
for(var i=0; i<len; i++) { 
if((el<i>.type=="checkbox") && (el<i>.name==name)) { 
el<i>.checked = false; 
} 
} 
} 
</script> 
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关 
<input type="checkbox" name="test" value="a" /> a 
<input type="checkbox" name="test" value="b" /> b 
<input type="checkbox" name="test" value="c" /> c 
<input type="checkbox" name="test" value="d" /> d 
<input type="checkbox" name="test" value="e" /> e 
<input type="checkbox" name="test" value="f" /> f 
<input type="checkbox" name="test" value="g" /> g 
<br> 
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1 
<input type="checkbox" name="num" value="2" /> 2 
<input type="checkbox" name="num" value="3" /> 3 
<br><br> 
<input type="button" value="选择所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br><br> 
<input type="button" value="选择所有的数字" onclick="checkAll('num')" /> <input type="button" value="清空选中的数字" onclick="clearAll('num')" /> 
</body> 
</body>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
js函数
复制代码代码如下:
<script type="text/javascript">
function checkAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++) {
if((el.type=="checkbox") && (el.name==name)) {
el.checked = true;
}
}
}
function clearAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++) {
if((el.type=="checkbox") && (el.name==name)) {
el.checked = false;
}
}
}
</script>

html
复制代码代码如下:
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
<input type="checkbox" name="test" value="a" /> a
<input type="checkbox" name="test" value="b" /> b
<input type="checkbox" name="test" value="c" /> c
<input type="checkbox" name="test" value="d" /> d
<input type="checkbox" name="test" value="e" /> e
<input type="checkbox" name="test" value="f" /> f
<input type="checkbox" name="test" value="g" /> g
<br />
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1
<input type="checkbox" name="num" value="2" /> 2
<input type="checkbox" name="num" value="3" /> 3
<br />
<br />
<input type="button" value="选择所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br />
<br />
<input type="button" value="选择所有的数字" onclick="checkAll('num')" /> <input type="button" value="清空选中的数字" onclick="clearAll('num')" />

e8hwl6prw · 发表于 2022-8-18 07:09:59

建军节建军节建军节建军节

a971560 · 发表于 2022-8-31 15:36:03

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

q215357618 · 发表于 2022-10-19 08:38:44

还有人在不。。。。。。。。。。啊

64000928 · 发表于 2023-1-11 09:20:07

sdsadsadsadf

9jduu05 · 发表于 2023-6-19 14:57:04

了乐趣了去了去了去了去了

Anthonylam · 发表于 2023-8-21 12:57:26

终于找到了，我擦

pb_tjc · 发表于 2023-9-4 01:51:35

很不错的样子

dingzhi521 · 发表于 2023-11-15 17:23:32

撒房产税陈飞飞

0y3yp · 发表于 2023-11-22 10:18:50

还有人在不。。。。。。。。。。啊

账号		自动登录	找回密码
密码			立即注册

[JavaScript] Javascript实现CheckBox的全选与取消全选的代码

相关帖子