6

I have a hierarchical category tree and checkboxes next to each item that allow to enable/disable the correpsonding category.

enter image description here

I assume it is an expected default behavior that all subategories of natural environment become checked when I check the natural environment category. But what about unchecking it again: Should this automatically uncheck all subcategories or restore the previous state in case some were checked already? Furthermore... Should unchecking one of the subcategories cause the parent category to become unchecked?

Improve this question

2 Answers 2

Reset to default
5

This is a common pattern for users.

  • If a subset of child items are selected, the parent item indicates partial selection.

  • If the parent item is clicked while in the "partial" state, all child items will also be selected.

  • If the parent is deselected, all child items will be deselected.

Clicking a parent item to select all children

Improve this answer
3

Typically, implementations of nested checkboxes use an intermediary state to manage the complexity you describe. For examples, look at the "select all" checkbox behavior on Gmail or check out this code example: http://codepen.io/96naveen/pen/PwVMJq. Selecting or de-selecting a child item puts the parent checkbox into a sort of "not applicable" state.

The behavior of the parent checkbox should never change - checking it selects all children and unchecking it deselects all children, no matter what the previous state. Otherwise you end up trying to manage too many different states with the behavior of the parent checkbox and it would likely be confusing both to build and for the user.

Hope this helps!

Improve this answer
2
  • I disagree with the last statement. When the parent is in a partially checked state, you want clicking on it to behave like this: checked -> unchecked -> restore partially checked -> etc. Otherwise, it may be very complicated for a user to undo his action if he just accidentaly checked a whole subtree that had many items selected and others deselected. Unless you implement another undo that works on this level.
    – André
    Aug 16, 2016 at 20:45
  • 1
    The codepen you linked to works in reverse to user expectation: when in "partial" state, clicking it deselects everything.
    – plainclothes
    Aug 16, 2016 at 21:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.