Javascript实现CheckBox的全选与取消全选的代码 | 学步园

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

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

2012年02月29日 ⁄ 综合 ⁄ 共 181字 ⁄ 字号小中大 ⁄ 评论关闭

本文介绍的方法，触发条件独立，可以全选或取消全选指定 name 的 CheckBox ，同一页面可以有多组供全选的 CheckBox ，功能健全，通用性较强。
效果图:

运行查看效果：

<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'); }"> 字母全选开关<br />
<input type="checkbox" name="test" value="a"> a<br />
<input type="checkbox" name="test" value="b"> b<br />
<input type="checkbox" name="test" value="c"> c<br />
<input type="checkbox" name="test" value="d"> d<br />
<input type="checkbox" name="test" value="e"> e<br />
<input type="checkbox" name="test" value="f"> f<br />
<input type="checkbox" name="test" value="g"> g<br />
<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<br />
<input type="checkbox" name="num" value="2"> 2<br />
<input type="checkbox" name="num" value="3"> 3 </p>
<p><input type="button" value="选择所有的字母" onclick="checkAll('test')"><input type="button" value="清空选中的字母" onclick="clearAll('test')"></p>
<p><input type="button" value="选择所有的数字" onclick="checkAll('num')"><input type="button" value="清空选中的数字" onclick="clearAll('num')">

返回

【上篇】用NTSD强制关掉进程
【下篇】could not load host key: /etc/ssh/ssh_host_rsa_key 无法启动ssh的一个解决办法

作者: panzer

该日志由 panzer 于12年前发表在综合分类下，最后更新于 2012年02月29日.
转载请注明: Javascript实现CheckBox的全选与取消全选的代码 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园保留所有权利.
软文销售 QQ客服：2265327166

点击这里给我发消息

（其他合作也可洽谈）