Jquery 实现checkbox全选方法

前端之家收集整理的这篇文章主要介绍了Jquery 实现checkbox全选方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

昨天早上有写到怎么利用Jquery实现全选

根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方。

文章最后我提出了一个问题,要写一个通用的方法调用,于是就有了现在的这篇文章,晚上回到家,我就写出了效果

下面的例子可以供大家讨论学习,如果觉得不错也可以直接应用到项目中。

1:为什么要写这个方法

网上实现一句话全选全不选的有很多,但是好像都忽略了一个问题,全选的checkBox可以控制下面的子checkBox,但是下面的子checkBox应该也可以控制上面的全选,这样就有了我的这个方法

2:开发过程:要实现通用就要解决2个问题,怎么分组,怎么判断组里面哪个checkBox为全选,我想了想,觉得用name分组可以,

用class来判断是否是需要全选的checkBox组。先找到所有class为需要全选的,再找出name属性,根据name属性就可以找到其他的子checkBox,只要找到元素就可以进行操作了

3:文件,下面是我实现的js,保存为xs_checkBox_all.js

代码如下:
Box'][class='" + xsChk + "'][name]";//所有定义此样式的checkBox $(xsChkAll).each(function () { var name = $(this).attr("name"); name = "input[type='checkBox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkBox $(this).click(function () { $(name).attr("checked",$(this)[0].checked); }) var xschk = $(this); $(name).click(function () { var IAll = $(name).length; //此子项目下所有checkBox的个数 var IChk = $(name + ":checked").length; //此子项目下所有勾选checkBox的个数 var isAllChecked = true; //是否是全选 if (IAll != IChk) { isAllChecked = false; } $(xschk).attr("checked",isAllChecked); }); }); });

页面使用

代码如下:
"> ">
全选one 全选
1
2
3
4
全选two 全选2
11
22
33
44

可以达到效果,如果有什么优化的地方,请大家提出,我会做的更好,谢谢大家了,以上就是本文的全部内容了,希望大家能够喜欢。

猜你在找的jQuery相关文章