三层规则嵌套逻辑勾选

截图:

代码如下:
<script type="text/javascript">
    //三层规则点击逻辑
    //点击第一层规则时.第二层和第三层规则全部选中
    function checkname($obj,$pid) {
        var checked = $obj.checked;
        if (checked) {
            $('[pid= ' + $pid + ']').attr('checked', true);
        } else {
            $('[pid= ' + $pid + ']').attr('checked', false);
        }
    }
 
    //点击第二层规则时.第三层规则全部选中
    function check($obj, $id, $pid) {
        var checked = $obj.checked;
        if (checked) {
            $('.check' + $id).attr('checked', true);
        } else {
            $('.check' + $id).attr('checked', false);
        }
 
        //只要有一个单选框选中.则它的上一层就勾选
        home($pid);
    }
 
    //点击第三层规则时.第二层和第一层都勾选
    function checkChild($obj, $id, $pid) {
        var checkedLength = $(".check" + $id + ':checked').length;
        if (checkedLength > 0) {
            $('#check' + $id).attr('checked', true);
        } else {
            $('#check' + $id).attr('checked', false);
        }
        home($pid);
    }
 
    //父一级规则勾选
    function home($pid) {
        var checkedIdLength = $("[pid=" + $pid + "]:checked").length;
        if (checkedIdLength > 0) {
            $("#" + $pid).attr('checked', true);
        } else {
            $("#" + $pid).attr('checked', false);
        }
    }
</script>
 
<div class="page">
    <div class="pageContent">
        <form method="post" action="__APP__/authGroup/updateGroup" class="pageForm required-validate" onsubmit="return validateCallback(this, dialogAjaxDone)">
            <input type="hidden" name="ruleid" value="{$Think.get.id}" />
            <div layouth="37">
                <volist name="node" id="node1">
                    <h2 class="contentTitle" style="border-bottom:none; background-color:#ebf0f5; margin-bottom:0;">
                        <input type="checkbox" <in name="node1.id" value="$selectdnode['rules']">checked</in> name="rule_id[]" value="{$node1.id}" id="{$node1.id}" onclick="checkname(this,{$node1.id});" />{$node1.title}
                    </h2>
                    <div class="pageFormContent" style="border-width:0;">
                        <volist name="node1._child" id="node2">
                            <fieldset>
                                <legend>
                                    <input type="checkbox" <in name="node2.id" value="$selectdnode['rules']">checked</in> name="rule_id[]" value="{$node2.id}" pid="{$node1.id}" id="check{$node2.id}" onclick="check(this,{$node2.id},{$node1.id});" />{$node2.title}
                                </legend>
                                <volist name="node2._child" id="node3">
                                    <label style="padding:0 5px 0 25px; width:100px;">
                                        <input type="checkbox" <in name="node3.id" value="$selectdnode['rules']">checked</in> name="rule_id[]" value="{$node3.id}" pid="{$node1.id}" class="check{$node2.id}" onclick="checkChild(this,{$node2.id},{$node1.id});"/>{$node3.title}
                                    </label>
                                </volist>
                            </fieldset>
                        </volist>
                    </div>
                </volist>
            </div>
            <div class="formBar">
                <label>
                    <input type="checkbox" group="rule_id[]" class="checkboxCtrl" />全选
                </label>
                <ul>
                    <li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交</button></div></div></li>
                    <li><div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div></li>
                </ul>
            </div>
        </form>
    </div>
</div>