Dynamic array comparison based on checkboxes?

Question

JavaScript

I have 2 types of checkbox groups.
for example 1 view:

checkbox id1 [value_a1]
checkbox id2 [value_a2]
checkbox id2 [value_a3]

As you can see, in checkbox type 1, getting value_a1 is easy.

But there are 2 types of checkboxes

checkbox id1 [value_a1, value_a2, value_a3]
checkbox id2 [value_b1, value_b2, value_b3]
checkbox id3 [value_c1, value_c2, value_c3]
-----
checkbox id4 [value_a1, value_b1, value_c1]
checkbox id5 [value_a2, value_b2, value_c2]
checkbox id6 [value_a3, value_b3, value_c3]

OR

checkbox id1 [value_a1]
checkbox id2 [value_b1]
checkbox id3 [value_c1]
-----
checkbox id4 [value_a1, value_b1, value_c1]

If you select the checkboxes id1 and id4 , then you should get value_a1 ,
if you additionally select id5 , the value_a2 should also be added If you select id1

and id2 - there will be no result.
The difficulty is that these are not radio buttons and there can be many checkbox values. It's also not clear how to remove values ​​when checkboxes are cleared

. Maybe someone knows some algorithm for such a case?

Answer 1

To store the selected values, you can use an object whose property names correspond to the indexes of checkbox groups, and the values ​​will be arrays of values ​​corresponding to the checkboxes of the selected group (mixed, without separation by specific checkboxes). In the checkbox's click handler, depending on whether it's checked, add or discard group values.
To display values ​​selected in all groups, take an array of selected values ​​of any group, and filter it with the condition that the array element is present in all arrays of selected group values.
It might look like this , for example.