< /p>

There are four levels of checkboxes. I classify them as level 1234. Select all to start with one-to-many, and then continue to many-to-many. .

As a result, we encountered many problems. Two-way binding was not used here, but a UI framework layer was used.

The current problem: When I click on any checkbox at level 4, it is very troublesome! To determine the parent level and then the parent level. . . . Like the above in order! Moreover, the checked status of this beautified checkbox and the clicked p are not two-way bound. It needs to be rendered once at the end! ! ! So I have almost no way to judge whether all the objects at the same level have been selected, and whether all the objects at the parent level have been selected. . . .

Attached is the document, http://www.layui.com/doc/modu...

Seeking solutions! !

<p class="upfloor">
    <p class="ltside">module</p>
    <p class="rtside"><span>Operation permissions</span>
        <input id="chooseall" type="checkbox" class="choosewhole" lay-filter="chooseall" lay-skin="primary">
        <label class="chooseall">Select all</label>
    </p>
</p>
<p class="floor">
    <!-- Billing reception -->
    <p class="frfloor floorsign">
        <p class="ltside">
            <input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
            <span>Billing reception</span>
        </p>
        <p class="rtside h72">
            <!-- a group -->
            <p class="items">
                <p class="groupall">
                    <input class="checkgroup" type="checkbox" lay-skin="primary">
                    <span>Maintenance Billing</span>
                    <p class="indexline"></p>
                </p>
                <p class="groupli">
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Open an order</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Complete</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Settlement</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Print</span>
                </p>
            </p>
            <p class="items">
                <p class="groupall">
                    <input class="checkgroup" type="checkbox" lay-skin="primary">
                    <span>Maintenance Billing</span>
                    <p class="indexline"></p>
                </p>
                <p class="groupli">
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Open an order</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Complete</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Settlement</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Print</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Anti-Settlement</span>
                </p>
            </p>
        </p>
    </p>
    <!-- Inventory Management -->
    <p class="sdfloor floorsign">
        <p class="ltside">
            <input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
            <span>Inventory Management</span>
        </p>
        <p class="rtside h394">
            <p class="items">
                <p class="groupall">
                    <input type="checkbox" class="checkgroup" lay-skin="primary">
                    <span>Maintenance Billing</span>
                    <p class="indexline"></p>
                </p>
                <p class="groupli">
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Maintenance Billing</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Maintenance Billing</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Maintenance Billing</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Maintenance Billing</span>
                </p>
            </p>
        </p>
    </p>
</p>