JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<select id = "ejemplo">
    <option>Seleccione un valor</option>
    <option value = "a">A</option>
    <option value = "b">B</option>
    <option value = "c">C</option>
</select>

A <input type = "checkbox" name = "a" class = "check" />
<div class = "a">
    A1 <input type = "checkbox" />
    A2 <input type = "checkbox" />
    A3 <input type = "checkbox" />
</div>

B <input type = "checkbox" name = "b" class = "check" />
<div class = "b">
    B1 <input type = "checkbox" />
    B2 <input type = "checkbox" />
    B3 <input type = "checkbox" />
</div>

C <input type = "checkbox" name = "c" class = "check" />
<div class = "c">
    C1 <input type = "checkbox" />
    C2 <input type = "checkbox" />
    C3 <input type = "checkbox" />
</div>

CSS

#ejemplo{
    display: block;
}

JavaScript

$("#ejemplo").change(function(){
    var forEach = Array.prototype.forEach;
    forEach.call($(".check"), function(checkbox){
        var marcar = checkbox.name == $("#ejemplo").val() ? true : false;
        checkbox.checked = marcar;
        forEach.call($("." + checkbox.name).find(":checkbox"), function(check){
            check.checked = marcar;
        });
    });
});