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

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

闭关修行中......

membalas semua(1)
小葫芦

Menu pepohon berulang daripada nod anak yang anda klik ke nod induk apabila mengulangi, ia menentukan sama ada nod anak berikut semua dipilih Jika semua nod anak dipilih, tetapkan nod semasa kepada benar

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!