jquery - how can i check all ul of nested checkboxes -
question:
i have category listing categories have children, trying create category when clicked, check sibling checkboxes in same category.
e.g; clicking all underneath music category 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 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/
$('.events-child-category-all').change( function(){ $(this).parent().siblings().find(':checkbox').attr('checked', this.checked); });
Comments
Post a Comment