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


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

运行查看效果:


[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[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>

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')" />



相关阅读:
用JavaScript页面不刷新时全选择,全删除(GridView)
独立图片服务器的图片上传的解决方式
一个超简单的JS拖拽实现代码(兼容IE,Firefox)
CSS教程:导致一些问题的overflow
ASP.NET MVC实现自己的一个视图引擎
javascript多种数据类型表格排序代码分析
php对gb编码动态转utf-8编码的几种方法评测
用vbs实现的输入助手附使用方法
Vista系统技巧:无法进入睡眠状态怎么解决
ASP/VBScript中CHR(0)的由来以及带来的安全问题分析
PHP中防止SQL注入实现代码
event.currentTarget和document.activeElement用法
SQL语句中一条常见的行合并问题
百度留言本js 大家可以参考下
快速导航

Copyright © 2016 phpStudy |