`
yangshen998
  • 浏览: 1240489 次
文章分类
社区版块
存档分类
最新评论

JS:支持任意数量的分组checkbox全选功能(几种方法的比较)

 
阅读更多

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

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics