用JQ写的支持任意数量的分组checkbox全选功能的超短代码,特点有两个,一是短,二是扩展容易,不需要改动JS,只需要复制一组之后按照命名规则改下编号.
(为书写简便,以下都省略了checkbox的value,实际应用中,这当然是必须的,请自行注意添加)
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<input id=CheckAll1 type="checkbox">全选第一组
<input name=subBox1 type="checkbox">1
<input name=subBox1 type="checkbox">2
<input name=subBox1 type="checkbox">3
<input id=CheckAll2 type="checkbox">全选第二组
<input name=subBox2 type="checkbox">1
<input name=subBox2 type="checkbox">2
<input name=subBox2 type="checkbox">3
<script type="text/javascript">
$(function() {
$("[id^='CheckAll']").click(function() {
var flag = $(this).attr("checked");
var n=$(this).attr('id').replace('CheckAll','');
$("[name=subBox"+n+"]:checkbox").each(function() {
$(this).attr("checked", flag);
})
})
})
</script>
但是,上面的代码,有个明显缺陷,就是各个分组的name都是同样的前缀加序号,而实际使用中,往往是需要给各分组设置完全不同意义的名称,比如设置成数据库中表字段的名称,以有利于代码可读性。
那么,换种思路,无视各分组的名称,按“全选”框的位置,取其后面或前面的复选框名称,就按这个名称取所有叫这个名的复选框就可以得到该分组的所有复选框了。
但是,在布局固定为上面那种形式时,这是可行的,但如果布局有较大差异,比如,先横排几个“全选”按钮,然后在下方再排几个分组,这种时候,如果不采取CSS控制位置,只按照自然的顺序,那么取值和设置就会出错了。
再换一种方法,把各分组的name放在一个JS数组里,这样是可行的。
但这个代码就不写了,因为,还是感觉这样有点麻烦。
最终,还是回到了和第一种类似的思路,仍然利用名称替换过滤,但是表现就比较不同了,等于说,开始的代码相当于实验产品,不具有什么实用性,而这个才是具有实用性的产物。
1.在名称上,既令各分组可以使用各自有意义的不同名称,也使全选框的名称变得更有指示意义。
2.利用事件冒泡机制,监听上层对象,而不对下面具体的筛选框进行逐个监听。
3.代码长度,基本差不多,只是因为添了注释,看来比较多。
4.使用规则只有一条,全选框的name必须起名为“ChkAll_所管理的分组的name”,当然,如果发生名称冲突的话,这个“ChkAll_”在下面的JS里是可以更改的,就是var chkAllName="ChkAll_";这一行。
<input name="ChkAll_Dept" type="checkbox">全选第一组
<input name="Dept" type="checkbox">开发
<input name="Dept" type="checkbox">市场
<input name="Dept" type="checkbox">财务
<input name="Dept" type="checkbox">管理
<br/>
<input name="ChkAll_Employee" type="checkbox">全选第二组
<input name="Employee" type="checkbox">张三
<input name="Employee" type="checkbox">李四
<input name="Employee" type="checkbox">王五
<!--其它类似添加-->
<script type="text/javascript">
$(function() {
var chkAllName="ChkAll_";/*“全选”复选框的name标记*/
$(document).click(function(e){/*利用事件冒泡机制,只对上层对象进行事件监听*/
var tmpName=e.target.name;/*冒泡点名*/
if(tmpName.indexOf(chkAllName)>-1){/*如果具有全选框的名称标记,代表是全选框*/
var flag=e.target.checked;/*取该全选框的状态*/
/*过滤掉共同的名称标记部分,剩下部分就可标识是用于管理哪个分组,对该分组遍历设置状态*/
$("[name=" + tmpName.replace(chkAllName,"")+ "]:checkbox").each(function() {
this.checked=flag;
})
}
});
});
</script>
分享到:
相关推荐
checkBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——js
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
winform DataGridView表头带CheckBox全选;winform DataGridView表头带CheckBox全选
JS控制checkbox全选、取消全选、删除功能的代码贴出来。 看下面两种实现方法:
ExpandableListView中group和child自定义视图带CheckBox,实现child全选、部分选中功能,同时实现类似邮件群发的用户选择功能,选中的用户在EditText中显示,点击后移除. 更新: 1. ExpandableListView勾选后生成的...
js实现checkbox 全选和取消 自己亲测可以使用
checkbox全选功能实例,checkbox,初学者checkbox应用及放置位置
javascript获取checkbox选定的值,checkbox全选功能的一个例子,方便新手朋友下载使用。费了好大劲才把功能做全了。
详细的介绍了 checkbox的全选方法
CheckBox全选与否,及删除问题
Checkbox全选反选.html
android checkbox全选反选
flex Datagrid checkbox全选 Datagrid
DevExpress 实现checkbox全选效果,内有主要代码,虽不能直接运行,但是都有详细的注释说明
本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下: 通过checkbox 进行全选和取消全选的操作,如果通过toggle进行处理,则会出现checkbox无法显示对勾的问题。 使用click事件,根据...
简单代码实现android的多选、全选、反选功能。介绍功能实现的全过程以及需要注意的地方。简单代码分享,希望能给大家带来一些帮助!
WPF 实现CheckBox全选、反选功能,界面简单实用,功能代码可以很好地套用到自己的项目,希望对有需要的小伙伴有帮助。
flex AdvancedDataGrid实现checkBox全选功能 实现全选,多选功能
Recyclerview item上CheckBox,包括全选,取消全选,单选功能
资源名称:JS实现checkbox的全选和反选资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。