javascript - 체크박스의 다단계 바인딩

Question

< /p>

4가지 수준의 확인란이 있습니다. 이를 수준 1234로 분류합니다. 일대다로 시작한 다음 다대다로 계속하려면 모두 선택하세요. .

결과적으로 여기서는 양방향 바인딩을 사용하지 않고 UI 프레임워크 레이어를 사용하는 등 많은 문제가 발생했습니다.

현재 문제: 레벨 4에서 아무 체크박스나 클릭하면 매우 번거롭습니다! 상위 수준을 결정한 다음 상위 수준을 결정합니다. . . . 위와 같이 순서대로! 게다가 이 아름답게 꾸며진 체크박스의 체크된 상태와 클릭된 p는 양방향으로 바인딩되지 않습니다. 마지막에 한 번 렌더링해야 합니다! ! ! 그래서 같은 레벨의 객체가 모두 선택되었는지, 상위 레벨의 객체가 모두 선택되었는지 판단할 방법이 거의 없습니다. . . .

첨부된 문서는 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

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