JS:支持任意数量的分组checkbox全选功能(几种方法的比较)
2010-09-21 00:23
696 查看
用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的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>
相关文章推荐
- 比较全的JS checkbox全选、取消全选、删除功能代码
- 比较全的JS checkbox全选、取消全选、删除功能代码
- 比较全的JS checkbox全选、取消全选、删除功能代码
- Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能 几种实现方法
- 比较全的JS checkbox全选、取消全选、删除功能代码
- 比较全的JS checkbox全选、取消全选、删除功能代码
- 使用js实现checkbox的全选与反选功能二
- js与jQuery实现checkbox复选框全选/全不选的方法
- JS小功能(checkbox实现全选和全取消)实例代码
- JS下高效拼装字符串的几种方法比较与测试代码
- JS小功能(checkbox实现全选和全取消)实例代码
- checkbox全选JS方法
- JS合并数组的几种方法及优劣比较
- 多种方法实现checkbox全选、取消全选、删除功能
- 在TableView中增加CheckBox的几种方法比较
- JS实现CheckBox复选框全选、不选或全不选功能
- GridView中CheckBox实现全选或反选功能的方法
- js实现checkbox的全选和全不选功能
- C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?