how can i check all ul of nested checkboxes
css, html, jquery
Solution
$('.events-child-category-all').change( function(){
$(this).parent().siblings().find(':checkbox').attr('checked', this.checked);
});
http://jsfiddle.net/SENV8/3/
Problem
Question: I have a category listing which some categories have children, I am trying to create a ALL category that when clicked, will check all sibling checkboxes in that same category. e.g; clicking ALL underneath the MUSIC category would check `blues, jazz, rock n roll` Code: HTML: ``` <ul name="events-categories" id="events-categories"> <li><input type="checkbox" name="category-events" value="185" placeholder="" id="category-185" class="events-category"> CONVENTIONS <ul class="event-children"> <li><input type="checkbox" name="child-category-all" value="" class="events-child-category-all">ALL</li> <li><input type="checkbox" name="child-category-190" value="190" id="child-category-190" class="child events-child-category">SCIENCE</li> <li><input type="checkbox" name="child-category-191" value="191" id="child-category-191" class="child events-child-category">TECHNOLOGY</li> </ul> </li> <li><input type="checkbox" name="category-events" value="184" placeholder="" id="category-184" class="events-category"> MUSIC <ul class="event-children"> <li><input type="checkbox" name="child-category-all" value="" class="events-child-category-all">ALL</li> <li><input type="checkbox" name="child-category-189" value="189" id="child-category-189" class="child events-child-category">BLUES</li> <li><input type="checkbox" name="child-category-188" value="188" id="child-category-188" class="child events-child-category">JAZZ</li> <li><input type="checkbox" name="child-category-187" value="187" id="child-category-187" class="child events-child-category">ROCK N ROLL</li> </ul> </li> <li><input type="checkbox" name="category-events" value="186" placeholder="" id="category-186" class="events-category"> TRIBUTES</li> </ul> ``` CSS: ``` .event-children { margin-left: 20px; list-style: none; display: none; } ``` jQuery So Far: ``` /** * left sidebar events categories * toggle sub categories */ $('.events-category').change( function(){ console.log('showing sub categories'); var c = this.checked; if( c ){ $(this).next('.event-children').css('display', 'block'); }else{ $(this).next('.event-children').css('display', 'none'); } }); $('.events-child-category-all').change( function(){ var c = this.checked; if( c ){ $(this).siblings(':checkbox').attr('checked',true); }else{ $(this).siblings(':checkbox').attr('checked',false); } }); ``` jsfiddle: http://jsfiddle.net/SENV8/