JSFiddle - React, Tailwind, and code Playground
HTML
<div class="checkboxes">
<input type="checkbox" value="a1" class='A'/> a
<input type="checkbox" value="a2" class='A'/> a
<input type="checkbox" value="a3" class='A'/> a
<input type="checkbox" value="a4" class='A'/> a
<input type="checkbox" value="a5" class='A'/> a
<input type="checkbox" value="a6" class='A'/> a
</div>
<br>
<div class="checkboxes">
<input type="checkbox" value="b1" class='B'/> b
<input type="checkbox" value="b2" class='B'/> b
<input type="checkbox" value="b3" class='B'/> b
<input type="checkbox" value="b4" class='B'/> b
<input type="checkbox" value="b5" class='B'/> b
<input type="checkbox" value="b6" class='B'/> b
</div>
<br>
<div class="checkboxes">
<input type="checkbox" value="c1" class='C'/> c
<input type="checkbox" value="c2" class='C'/> c
<input type="checkbox" value="c3" class='C'/> c
<input type="checkbox" value="c4" class='C'/> c
<input type="checkbox" value="c5" class='C'/> c
<input type="checkbox" value="c6" class='C'/> c
</div>
JavaScript
$(document).ready(function () {
$('.checkboxes input[type="checkbox"]').change(function () {
var arraysFilled = [];
$('.checkboxes').each(function(){
var identifier = $(this).find('input').attr('class');
var filledVals = [];
$(this).find("input[type='checkbox']:checked").each(function(){
filledVals.push($(this).val());
});
var filledElements = 'parameter ===> '+identifier+' ===> value ===> '+filledVals;
if (filledVals.length != 0) {
arraysFilled.push(filledElements);
}
});
alert(arraysFilled);
});
});