Jquery 实现checkbox全选方法

 更新时间:2015年01月28日 10:26:39   投稿:hebedich  
本文主要向大家展示了一段使用jQuery实现checkbox全选的方法,以及编写此方法的背景和过程,非常详细,这里推荐给小伙伴们。

昨天早上有写到怎么利用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);
        });
    });
});

页面使用

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
    </script>
    <script src="xs_checkbox_all.js" type="text/javascript"></script>
    <fieldset>
        <legend>全选one</legend>
        <input type="checkbox" class="xsChk" name="chk" />
        全选
    <div>
        <input type="checkbox" name="chk" />
        1<br />
        <input type="checkbox" name="chk" />
        2<br />
        <input type="checkbox" name="chk" />
        3<br />
        <input type="checkbox" name="chk" />
        4<br />
    </div>
    </fieldset>
    <fieldset>
        <legend>全选two</legend>
        <input type="checkbox" class="xsChk" name="chk1" />
        全选2
    <div>
        <input type="checkbox" name="chk1" />
        11<br />
        <input type="checkbox" name="chk1" />
        22<br />
        <input type="checkbox" name="chk1" />
        33<br />
        <input type="checkbox" name="chk1" />
        44<br />
    </div>
    </fieldset>
</body>
</html>

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

相关文章

最新评论