JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<section id = "principal">
    Checkbox A: <input type = "checkbox" id = "a" />
    Checkbox B: <input type = "checkbox" id = "b" />
    Checkbox C: <input type = "checkbox" id = "c" />
</section>
<section id = "secundario">
    <div class = "a">
        A<input type = "checkbox" />
        A<input type = "checkbox" />
        A<input type = "checkbox" />
    </div>
    <div class = "b">
        B<input type = "checkbox" />
        B<input type = "checkbox" />
        B<input type = "checkbox" />
    </div>
    <div class = "c">
        C<input type = "checkbox" />
        C<input type = "checkbox" />
        C<input type = "checkbox" />
    </div>
</section>

CSS

div{
    display: none;
}

JavaScript

$("#principal [type=checkbox]").click(function(){
    var self = this;
    $("#principal [type=checkbox]").each(function(index, checkbox){
        checkbox.checked = checkbox == self ? true : false;
    });
    $("#secundario div").each(function(index, div){
        div.style.display = div.className == self.id ? "block" : "none";
    });
});