层级效果

1517369425(1).jpg

html：

<!--权限管理-->
                                    <div class="limitManager">
    <ul class="limitManager_one">
        <li><div><input type="checkbox"><span>系统管理</span></div></li>
        <li><div><input type="checkbox"><span>权限管理</span></div>
            <ul class="limitManager_two">
                <li><div><input type="checkbox"><span>角色管理</span></div>
                    <ul class="limitManager_three">
                        <li><div><input type="checkbox"><span>角色增加</span></div></li>
                        <li><div><input type="checkbox"><span>角色删除</span></div></li>
                        <li><div><input type="checkbox"><span>角色编辑</span></div></li>
                        <li><div><input type="checkbox"><span>角色查询</span></div></li>
                    </ul>
                </li>
                <li><div><input type="checkbox"><span>用户管理</span></div></li>
                <li><div><input type="checkbox"><span>行为日志</span></div>
                    <ul class="limitManager_three">
                        <li><div><input type="checkbox"><span>查询日志</span></div></li>
                        <li><div><input type="checkbox"><span>清空日志</span></div></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><div><input type="checkbox"><span>菜单管理</span></div></li>
    </ul>
</div>

js：

// 管理权限
    $('.limitManager_one>li>div>input').click(function (e) {
        var allInput =  $(this).parent().parent().find('input');
        console.log($(this).prop("checked"));
        if(!$(this).prop("checked")){
            allInput.removeAttr("checked");
        }else{
            allInput.prop("checked","true");
        }
    });
    //二级
    $('.limitManager_two>li>div>input').click(function (e) {
        var allInput =  $(this).parent().parent().find('input');
        if(!$(this).prop("checked")){
            allInput.removeAttr("checked");
        }else{
            allInput.prop("checked","true");
        }
    });
    // 三级
    $('.limitManager_three>li>div>input').click(function (e) {

        // 相关二级
        var two = $(this).parent().parent().parent().parent();
        var twoInput = two.children('div').find('input');
        // 相关一级
        var one = two.parent().parent();
        var oneInput = one.children('div').find('input');

        var allInput =  $(this).parent().parent().find('input');
        if(!$(this).prop("checked")){
        }else{
            oneInput.prop("checked","true");
            twoInput.prop("checked","true");
        }
    });

css

 .limitManager{
            width:100%;
        }
        .limitManager_one,.limitManager_two,.limitManager_three{
            border:1px solid #eee;
            padding:5px;
        }
        .limitManager_two,.limitManager_three{
            margin-left: 3rem;
        }
        .limitManager_three>li{
            display: inline-block;
            width: 150px;
        }