【求助】复选框的嵌套功能

给你一个参考。
<input name="id[]" type="checkbox" value="0" />
<input name="id[]" type="checkbox" value="1" />
<input name="id[]" type="checkbox" value="2" />
<input name="id[]" type="checkbox" value="3" />
<input name="id[]" type="checkbox" value="4" />
以上是列出来的复选框。
<input name="chkall" type="checkbox" value=on onclick=CheckAll(this.form) /> 全选点击时执行下面的函数可先选择对应的名称组。至于二级什么的你加一层上去就行了。function CheckAll(form) {
for (var i=0;i<form.elements.length;i++) {
var e = form.elements[i];
if (e.name != 'chkall' && e.type=='checkbox')
e.checked = form.chkall.checked;
}
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html>
<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script>
        <script>
            $(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>
<table>
    <ul>
        <li>
            <lable><input name="all" value="all" type="checkbox"/>all</lable>
            <ul id="childs">
                <li><lable><input name="a" value="1" type="checkbox"/>1</lable>
                    <ul>
                        <li><lable><input name="a" value="1-1" type="checkbox"/>1-1</lable></li>
                        <li><lable><input name="a" value="1-2" type="checkbox"/>1-2</lable></li>
                        <li><lable><input name="a" value="1-3" type="checkbox"/>1-3</lable></li>
                    </ul>
                </li>
                <li><lable><input name="a" value="2" type="checkbox"/>2</lable>
                    <ul>
                        <li><lable><input name="a" value="2-1" type="checkbox"/>2-1</lable></li>
                        <li><lable><input name="a" value="2-2" type="checkbox"/>2-2</lable></li>
                        <li><lable><input name="a" value="2-3" type="checkbox"/>2-3</lable></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</table>
<script>
    var childs = $("#childs"),
        all = $("input[type=checkbox][name='all']"),
        childCount =  childs.find("input[type=checkbox]").length;
    $("input[type=checkbox]").change(function(){
        var _this = $(this);
        if(this.value.indexOf("-") === -1){
            _this.closest("li").find("ul input[type=checkbox]").prop("checked",_this.is(":checked"));
        } else {
            var _ul = _this.closest("ul");
            _ul.closest("li")
                    .find("input[type=checkbox]:first")
                    .prop("checked",_ul.find("input[type=checkbox]:checked").length === _ul.find("input[type=checkbox]").length);
        }
        if(this.name !== "all")
            all.prop("checked",childs.find("input[type=checkbox]:checked").length === childCount);
        return false;
    });
</script>