嵌套全选jq代码

最新推荐文章于 2020-04-02 17:24:55 发布

zxxlgs001

最新推荐文章于 2020-04-02 17:24:55 发布

阅读量220

点赞数

分类专栏：技术问题

技术问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
        <script type="text/javascript" src="jquery.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#checkAll").click(function() {
                    $('input[name^="subBox"]').attr("checked", this.checked);
                });

                var $subBox1 = $("input[name='subBox1']");

                $subBox1.click(function() {

                    $("#subBoxSup1").attr("checked", $subBox1.length == $("input[name='subBox1']:checked").length ? true: false);
                    if ($("#subBoxSup1").attr("checked") == "checked" && $("#subBoxSup2").attr("checked") == "checked"){
                        $("#checkAll").attr("checked", true);
                    } else {
                        $("#checkAll").attr("checked", false);
                    }
                });

                var $subBox2 = $("input[name='subBox2']");
                $subBox2.click(function() {
                    $("#subBoxSup2").attr("checked", $subBox2.length == $("input[name='subBox2']:checked").length ? true: false);
                    if ($("#subBoxSup1").attr("checked") == "checked"&& $("#subBoxSup2").attr("checked") == "checked"){
                        $("#checkAll").attr("checked", true);
                    } else {
                        $("#checkAll").attr("checked", false);
                    }

                });

                $("#subBoxSup1").click(function() {
                    $('input[name="subBox1"]').attr("checked", this.checked);
                    if ($subBox1.length == $("input[name='subBox1']:checked").length && $subBox2.length == $("input[name='subBox2']:checked").length) {
                        $("#checkAll").attr("checked", true);
                    } else {
                        $("#checkAll").attr("checked", false);
                    }

                });
                $("#subBoxSup2").click(function() {
                    $('input[name="subBox2"]').attr("checked", this.checked);
                    if ($subBox1.length == $("input[name='subBox1']:checked").length && $subBox2.length == $("input[name='subBox2']:checked").length) {
                        $("#checkAll").attr("checked", true);
                    } else {
                        $("#checkAll").attr("checked", false);
                    }

                });

            });
        </script>
    </head>
    
    <body>
        <input id="checkAll" type="checkbox" />
        全选
        <br>
        <input id="subBoxSup1" name="subBoxSup1" type="checkbox" />
        组一
<br>
        <input name="subBox1" type="checkbox" />
        项1
        <input name="subBox1" type="checkbox" />
        项2
        <input name="subBox1" type="checkbox" />
        项3
        <input name="subBox1" type="checkbox" />
        项4
        <br>
        <input id="subBoxSup2" name="subBoxSup2" type="checkbox" />
        组二
<br>
        <input name="subBox2" type="checkbox" />
        项1
        <input name="subBox2" type="checkbox" />
        项2
        <input name="subBox2" type="checkbox" />
        项3
        <input name="subBox2" type="checkbox" />
        项4
    </body>

</html>