Checkboxes that allow you to select parent and children as distinct entities

Question

This is a bit hard to explain but let's say I have this hierarchy for a checkbox list:

->Item A
---->Item 1
---->Item 2
->Item B
---->Item 3
---->Item 4

I need to be able to cover both these cases:

• Select Item A and Item B so that you see a chart with data for Item A and Item B
• Select Item A, Item 2, Item 4, etc. so that you see a chart with data for Item A, Item 2, Item 4, etc.

Currently the way this works is that you can check each checkbox individually and get the desired behavior. However, this breaks how everyone expects checkboxes to work because we don't automatically check all the children when a parent is checked. It also makes it so you have to manually check the children if that's what you want.

So my question is how can I have a checkbox hierarchy that both works as users expect (children are checked when parent is) and still covers the case of the parent functioning as its own separate entity.

I think I'll need some secondary click option? Looking for any ideas.

Thanks in advance.

Answer 1

Typically with a hierarchy tree (even just one level deep) there are two scenarios you can model.

Either the top level is a "parent" to the "children" or the top level is just a convenience "grouper" for the items under it.

In either scenario there is an inherent expectation if you provide a top level checkbox that it will select all children underneath it... Since it wraps the other items.

I'm not sure what your items are but I'll use some sample data below to explain:

[_] Fruit
      [_] Banana
      [_] Kiwi
      [_] Pear
[_] Vegetables
      [_] Carrot
      [_] Eggplant
      [_] Potato

With this tree I expect that I can pick any combo of individual items (eg Banana, Pear, Potato)... And/or I can pick a high level group like Fruit and it will pick all items within it.

In a well built UI I would expect that if all children are checked, the matching parent will become checked too to ensure the visual state is correct.

In my example it wouldn't make sense to pick "Vegetables" AND Potato since picking the category of Vegetables logically includes Potato.

It sounds like you are trying to allow this last scenario, but I'd argue it doesn't make sense. However I don't know what your data set is so it would be really helpful to know that. You may find that your scenario does make sense, but it really isn't a hierarchy and thus it should be structured differently?... But we'll need to see the actual items to make the right call.

Answer 2

Three-way checkbox might be what you're looking for. Multiple installation programs work this way, when you are selecting custom software components that you need. Node checkbox checked means - whole subtree is checked. On the other hand, checkbox unchecked = whole subtree unchecked. If only a part of subtree is checked, then the check box is in some third state.

Answer 3

A solution could be to display only the parent options at beginning and when the user select an option, display the subitems with a message / question above (or on the right side of the parent option) that clarify the action "You need to include this options too in your choice?"

Answer 4

Normally, the parent's checkbox state says "[all/some] of my children [are/aren't] selected" and nothing more.

What your parent checkbox says is different, though: it says nothing about its children, instead saying "a summary of my children is selected."

In other words, you've replaced the normal function of the parent checkbox with a different, discrete option: "also include a summary of the children."

Knowing that, I'd say you should experiment with layouts that will allow you to add that option as a separate checkbox. For example, borrowing the produce analogy from another answer:

[X] Fruits (total)
[-] Fruits
    [_] Apples
    [X] Oranges
    [_] Grapes
[_] Vegetables (total)
[X] Vegetables
    [X] Carrots
    [X] Onions
    [X] Potatoes

Answer 5

How about a Selectable TreeView, having three states of checks for each item (checked, unchecked, undetermined)?

Using it will also give you the benefit of expanding and collapsing sub-trees of items...

Answer 6

hope this could explain my answer better you need to show different state for "PICK ALL" and "PICK ONE OF ..."

as you can see I PICK ALL item A so it show a full checkbox, but on item B I only pick item 4. so on item B the it shows a hollow checkbox