Checkbox dependientes

[Alexis88]

Ahora mismo imagino en varias formas de hacerlo, una de ellas consistiría en tener los checkbox dependientes en contenedores cuya clase sea igual que el identificador del checkbox padre, de este modo, cuando marques un checkbox padre, muestras al contenedor cuya clase coincida con el identificador del checkbox marcado.

Código 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>
 

Código CSS:

div{
    display: none;
}
 

Código 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";
    });
});
 

Y para que el checkbox anteriormente marcado no quede así, recorro al conjunto de checkbox padre y en la iteración, dejo marcado al checkbox que coincida con el que acabamos de marcar, tomando así un comportamiento similar al de los radiobutton.



Imagino que esto podría simplificarse, pero es solo una de las tantas alternativas de solución.

Saludos