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

有四级的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)
小葫芦

트리 메뉴는 클릭한 하위 노드부터 상위 노드까지 반복됩니다. 반복 시 다음 하위 노드가 모두 선택되었는지 확인합니다. 모든 하위 노드가 선택되면 현재 노드를 true로 설정합니다.

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!