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.

6 Answers 6


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.

  • I agree with what you're saying. I do need to support that scenario for this particular data set though. The items are locations, so the parents are regions and the children are cities. The user needs to be able to view data for the individual cities, but also needs to see the aggregate data for the regions. And it's a valid case to compare the data for a region to the data for a city (worth noting that some of the data we're looking at is in percentages, not absolute totals, so this kind of comparison definitely makes sense). Seems like checkboxes may not be the right solution after all?
    – vee
    Commented Jun 14, 2016 at 21:53

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.

  • I've looked at 3-state and I don't think that will solve this issue. It is not taking into account that the parent item is its own entity. The 3rd state merely indicates that some but not all of the children items are checked. What I need is some way to check the parent as a separate selected item without regard for its children. I think I'll need some secondary input, or perhaps checkboxes aren't even the right way to deal with this.
    – vee
    Commented Jun 8, 2016 at 21:30

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?"


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

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...


enter image description here

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

  • Welcome to the site, @danny. Your post doesn't appear to answer the original poster's question of how to select just the parent to show a chart for it while also preserving user expectations of automatically selecting children when the parent is selected. You may want to edit it to clarify that. Commented Nov 10, 2016 at 5:04

Your Answer

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

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