您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

Jquery 实现checkbox全选方法_jquery

2025/1/10 9:03:15发布14次查看
昨天早上有写到怎么利用jquery实现全选
根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方。
文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有了现在的这篇文章,晚上回到家,我就写出了效果
下面的例子可以供大家讨论学习,如果觉得不错也可以直接应用到项目中。
1:为什么要写这个方法
   网上实现一句话全选全不选的有很多,但是好像都忽略了一个问题,全选的checkbox可以控制下面的子checkbox,但是下面的子checkbox应该也可以控制上面的全选,这样就有了我的这个方法。
2:开发过程:要实现通用就要解决2个问题,怎么分组,怎么判断组里面哪个checkbox为全选,我想了想,觉得用name分组可以,
用class来判断是否是需要全选的checkbox组。先找到所有class为需要全选的,再找出name属性,根据name属性就可以找到其他的子checkbox,只要找到元素就可以进行操作了
3:文件,下面是我实现的js,保存为xs_checkbox_all.js
复制代码 代码如下:
$(document).ready(function () {
    var xschk = xschk;//定义的样式
    var xschkall = input[type='checkbox'][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);
        });
    });
});
页面使用
复制代码 代码如下:
ttp://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
http://www.w3.org/1999/xhtml>
全选one
全选
1
2
3
4
全选two
全选2
11
22
33
44
可以达到效果,如果有什么优化的地方,请大家提出,我会做的更好,谢谢大家了,以上就是本文的全部内容了,希望大家能够喜欢。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product