JavaScript - チェックボックスのマルチレベルバインディング

Question

< /p>

チェックボックスには 4 つのレベルがあり、これらをレベル 1234 に分類します。すべてを選択して 1 対多から始め、次に多対多に進みます。 。

その結果、ここでは双方向バインディングは使用されず、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="フロア">
    <!-- 請求受付 -->
    <p class="frfloor フロアサイン">
        <p class="ltside">
            <input type="checkbox"lay-filter="choosepart" class="choosepart"lay-skin="primary">
            請求受付
        </p>
        <p class="rtside h72">
            <!-- グループ -->
            <p class="アイテム">
                <p class="グループオール">
                    <input class="checkgroup" type="checkbox"lay-skin="primary">
                    <span>メンテナンスの請求</span>
                    <p class="インデックスライン"></p>
                </p>
                <p class="グループリ">
                    <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="アイテム">
                <p class="グループオール">
                    <input class="checkgroup" type="checkbox"lay-skin="primary">
                    <span>メンテナンスの請求</span>
                    <p class="インデックスライン"></p>
                </p>
                <p class="グループリ">
                    <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 フロアサイン">
        <p class="ltside">
            <input type="checkbox"lay-filter="choosepart" class="choosepart"lay-skin="primary">
            <span>在庫管理</span>
        </p>
        <p class="rtside h394">
            <p class="アイテム">
                <p class="グループオール">
                    <input type="checkbox" class="checkgroup"lay-skin="primary">
                    <span>メンテナンスの請求</span>
                    <p class="インデックスライン"></p>
                </p>
                <p class="グループリ">
                    <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 に設定します。