javascript - 关于checkbox的多级绑定
阿神
阿神 2017-05-16 13:11:32
0
1
532

有四级的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>
阿神
阿神

闭关修行中......

全部回复(1)
小葫芦

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板