javascript - 关于checkbox的多级绑定

Question

有四级的checkbox，我归为1234级，全选开始一对多，然后下来都是多对多。。

结果碰到了很多问题，这里没有用双向绑定，用的是一个ui框架 layer。

现在的问题：我在点击第4级的任何一个checkbox的时候，非常麻烦！要判断父级再父级。。。。依次像上！而且这个美化过的checkbox的checked状态和点击的p不是双向绑定的。要在最后render一次！！！所以我几乎没有办法判断同级的是否已经全选，父级的是否全选。。。。

附上文档，http://www.layui.com/doc/modu...

求解思路！！

<p class="upfloor">
    <p class="ltside">模块</p>
    <p class="rtside"><span>操作权限</span>
        <input id="chooseall" type="checkbox" class="choosewhole" lay-filter="chooseall" lay-skin="primary">
        <label class="chooseall">全选</label>
    </p>
</p>
<p class="floor">
    <!-- 开单接待 -->
    <p class="frfloor floorsign">
        <p class="ltside">
            <input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
            <span>开单接待</span>
        </p>
        <p class="rtside h72">
            <!-- 一组 -->
            <p class="items">
                <p class="groupall">
                    <input class="checkgroup" type="checkbox" lay-skin="primary">
                    <span>维修开单</span>
                    <p class="indexline"></p>
                </p>
                <p class="groupli">
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>开单</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>完工</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>结算</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>打印</span>
                </p>
            </p>
            <p class="items">
                <p class="groupall">
                    <input class="checkgroup" type="checkbox" lay-skin="primary">
                    <span>维修开单</span>
                    <p class="indexline"></p>
                </p>
                <p class="groupli">
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>开单</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>完工</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>结算</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>打印</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>反结算</span>
                </p>
            </p>
        </p>
    </p>
    <!-- 库存管理 -->
    <p class="sdfloor floorsign">
        <p class="ltside">
            <input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
            <span>库存管理</span>
        </p>
        <p class="rtside h394">
            <p class="items">
                <p class="groupall">
                    <input type="checkbox" class="checkgroup" lay-skin="primary">
                    <span>维修开单</span>
                    <p class="indexline"></p>
                </p>
                <p class="groupli">
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>维修开单</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>维修开单</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>维修开单</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>维修开单</span>
                </p>
            </p>
        </p>
    </p>
</p>

Answer 1

树形菜单，从你点击的那个子节点往父节点递归，递归的时候判断下面的子节点是不是都选中了，如果子节点都选中就把当前节点置为ture