关于checkbox的多级绑定

clipboard.png

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

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

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

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

求解思路!!

<div class="upfloor">
    <div class="ltside">模块</div>
    <div class="rtside"><span>操作权限</span>
        <input id="chooseall" type="checkbox" class="choosewhole" lay-filter="chooseall" lay-skin="primary">
        <label class="chooseall">全选</label>
    </div>
</div>
<div class="floor">
    <!-- 开单接待 -->
    <div class="frfloor floorsign">
        <div class="ltside">
            <input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
            <span>开单接待</span>
        </div>
        <div class="rtside h72">
            <!-- 一组 -->
            <div class="items">
                <div class="groupall">
                    <input class="checkgroup" type="checkbox" lay-skin="primary">
                    <span>维修开单</span>
                    <div class="indexline"></div>
                </div>
                <div 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>
                </div>
            </div>
            <div class="items">
                <div class="groupall">
                    <input class="checkgroup" type="checkbox" lay-skin="primary">
                    <span>维修开单</span>
                    <div class="indexline"></div>
                </div>
                <div 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>
                </div>
            </div>
        </div>
    </div>
    <!-- 库存管理 -->
    <div class="sdfloor floorsign">
        <div class="ltside">
            <input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
            <span>库存管理</span>
        </div>
        <div class="rtside h394">
            <div class="items">
                <div class="groupall">
                    <input type="checkbox" class="checkgroup" lay-skin="primary">
                    <span>维修开单</span>
                    <div class="indexline"></div>
                </div>
                <div 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>
                </div>
            </div>
        </div>
    </div>
</div>
阅读 2.3k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题