javascript - Liaison multi-niveaux d'une case à cocher

Question

< /p>

Il existe quatre niveaux de cases à cocher. Je les classe au niveau 1234. Sélectionnez tout pour commencer par un à plusieurs, puis continuez avec plusieurs à plusieurs. .

En conséquence, nous avons rencontré de nombreux problèmes. La liaison bidirectionnelle n'a pas été utilisée ici, mais une couche de structure d'interface utilisateur a été utilisée.

Le problème actuel : lorsque je clique sur une case à cocher au niveau 4, c'est très gênant ! Pour déterminer le niveau parent puis le niveau parent. . . . Comme ci-dessus dans l'ordre ! De plus, le statut coché de cette case à cocher embellie et le p cliqué ne sont pas liés dans les deux sens. Il doit être rendu une fois à la fin ! ! ! Je n'ai donc presque aucun moyen de juger si tous les objets du même niveau ont été sélectionnés et si tous les objets du niveau parent ont été sélectionnés. . . .

Ci-joint le document, http://www.layui.com/doc/modu...

À la recherche de solutions ! !

<p class="upfloor">
    <p class="ltside">module</p>
    <p class="rtside"><span>Autorisations d'opération</span>
        <input id="chooseall" type="checkbox" class="choosewhole" lay-filter="chooseall" lay-skin="primary">
        <label class="chooseall">Sélectionner tout</label>
    </p>
</p>
<p class="étage">
    <!-- Réception de facturation --->
    <p class="frfloor floorsign">
        <p class="ltside">
            <input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
            <span>Réception de facturation</span>
        </p>
        <p class="rtside h72">
            <!-- un groupe --->
            <p class="articles">
                <p class="groupall">
                    <input class="checkgroup" type="checkbox" lay-skin="primary">
                    <span>Facturation de maintenance</span>
                    <p class="indexline"></p>
                </p>
                <p class="groupli">
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Ouvrir une commande</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Complet</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Règlement</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Imprimer</span>
                </p>
            </p>
            <p class="articles">
                <p class="groupall">
                    <input class="checkgroup" type="checkbox" lay-skin="primary">
                    <span>Facturation de maintenance</span>
                    <p class="indexline"></p>
                </p>
                <p class="groupli">
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Ouvrir une commande</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Complet</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Règlement</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Imprimer</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Anti-règlement</span>
                </p>
            </p>
        </p>
    </p>
    <!-- Gestion des stocks --->
    <p class="sdfloor floorsign">
        <p class="ltside">
            <input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
            <span>Gestion des stocks</span>
        </p>
        <p class="rtside h394">
            <p class="articles">
                <p class="groupall">
                    <input type="checkbox" class="checkgroup" lay-skin="primary">
                    <span>Facturation de maintenance</span>
                    <p class="indexline"></p>
                </p>
                <p class="groupli">
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Facturation de maintenance</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Facturation de maintenance</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Facturation de maintenance</span>
                    <input type="checkbox" class="single" lay-skin="primary">
                    <span>Facturation de maintenance</span>
                </p>
            </p>
        </p>
    </p>
</p>

Answer 1

Le menu arborescent revient du nœud enfant sur lequel vous avez cliqué vers le nœud parent. Lors de la récursion, il détermine si les nœuds enfants suivants sont tous sélectionnés. Si tous les nœuds enfants sont sélectionnés, définissez le nœud actuel sur true

.