web-dev-qa-db-ja.com

ネストされたチェックボックスの動作チェック/チェック解除

階層的なカテゴリツリーと各項目の横にあるチェックボックスを使用して、対応するカテゴリを有効/無効にできます。

enter image description here

自然環境のカテゴリをチェックすると、自然環境のすべてのサブカテゴリがチェックされることが予想されるデフォルトの動作であると思います。しかし、再度チェックを外すとどうなりますか?これにより、すべてのサブカテゴリのチェックを自動的に外すか、一部がすでにチェックされている場合に備えて以前の状態に戻す必要がありますか?さらに...サブカテゴリの1つをオフにすると、親カテゴリがオフになりますか?

4
Chris

これはユーザーにとって一般的なパターンです。

  • 子アイテムのサブセットが選択されている場合、親アイテムは部分的な選択を示します。

  • 「部分」状態で親アイテムをクリックすると、すべての子アイテムも選択されます。

  • 親が選択解除されている場合、すべての子アイテムが選択解除されます。

Clicking a parent item to select all children

5
plainclothes

通常、ネストされたチェックボックスの実装は、中間状態を使用して、説明する複雑さを管理します。例として、Gmailの「すべて選択」チェックボックスの動作を確認するか、次のコード例を確認してください: http://codepen.io/96naveen/pen/PwVMJq 。子アイテムを選択または選択解除すると、親チェックボックスが一種の「適用外」の状態になります。

親チェックボックスの動作は決して変更しないでください。チェックすると、すべての子が選択され、チェックを外すと、以前の状態に関係なくすべての子が選択解除されます。そうしないと、親チェックボックスの動作で非常に多くの異なる状態を管理しようとすることになり、ビルドとユーザーの両方を混乱させる可能性があります。

お役に立てれば!

3
Jennifer