嵌套全选jq代码

<!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>
嵌套全选jq代码

悦读
