$("#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"; }); });
<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>
div{ display: none; }