how can i check all ul of nested checkboxes
- by Mike
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/
