search

Home  >  Q&A  >  body text

javascript - Multi-level binding of checkbox

< /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>
阿神阿神2743 days ago519

reply all(1)I'll reply

  • 高洛峰

    高洛峰2017-05-16 13:13:32

    The tree menu recurses from the child node you clicked to the parent node. When recursing, it determines whether the following child nodes are all selected. If all the child nodes are selected, set the current node to true

    reply
    0
  • Cancelreply