今日は、jQuery の威力を改めて実感しました。複数レベルのチェック ボックス効果を作成しましたが、コードは合計 20 行でした。
js を使ってもう一度試してみようと思いましたが、いくつかのメソッドを書いた後、互換性の問題を考慮する必要があり、コードの量が急増してしまいました。
主に jquery でのこのエフェクトの実装を共有します。コード ブロックは 2 つの部分に分かれています:
最初の部分は、すべてを選択した場合の効果です。つまり、選択されたチェック ボックスをクリックすると、それに応じてその子孫が選択または選択解除されます。この人のやり方はとても簡単です。コードは次のとおりです:
evtEle.parent ().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle はクリックされたチェックボックスです
2 番目は、現在のチェック ボックスの親ボックスが、現在のチェック ボックスのすべての兄弟が選択されているかどうかに基づいて親ボックスが選択されているかどうかを判断し、親ボックスの検索を続行します。親箱などの
全て選択した場合、ここでの実装は親を利用して全ての親ボックスを取得し、それぞれを組み合わせることでそれぞれの操作が完了します。
すべてが選択されていない場合、親ボックスは順番に選択を失います。コードは次のとおりです。
if (evtEle .is("入力: チェック済み")) {
evtEle.parents(".checks").each(function () {
!$(this).children("p").children("input :checkbox").filter (function () {
return !this.checked;
})[0] && $(this).prev().children("input:checkbox").attr("チェック済み", "チェック済み" );
});
} else {
evtEle.parents(".checks").prev().children("input:checkbox").attr("チェック済み", false);
}
コードのダウンロード
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
