Is this a good concept: "Select one or multiple items using checkboxes and use a radio button to select all"?

We have found a component on a website* with a selection that works like this:

  • There's a radio button All.
  • There are multiple checkboxes, one for each value.
  • It's possible to select one ore more of these checkboxes
  • It's possible to select all items – by selecting all checkboxes or by using the All option.
  • It's possible to deselect all values, which is the same as selecting all values.

This means, there's never an empty selection.


Example

● All             ⚬ All             ⚬ All             ● All
◻ V1              ◻ V1              ◻ V1   → click →  ◻ V1
◻ V2   → click →  ◼ V2              ◼ V2              ◻ V2
◻ V3              ◻ V3   → click →  ◼ V3              ◻ V3

Legend:

  • Radio: (unchecked) (checked)
  • Checkbox: (unchecked) (checked)

I've created a small prototype where you can see it in action and try it yourself on jsfiddle.net.


I kind of like this concept but I'm not really sure about it. We like to use it together with a short list of 4-8 items where it's mandatory that one, multiple or all items are selected.


My questions are:

What is the name of this pattern?

Is it easy to understand?

Is it a good way to represent this kind of selection?

Is it better to rely on a more common approach, which people might be familiar with:

◩ All  → click →  ◼ All
◻ V1              ◼ V1
◼ V2              ◼ V2
◻ V3              ◼ V3

Legend:

  • Checkbox: (incomplete selection)

*Unfortunately I can't recall where we have seen this.