Query:
In my category listings, some categories have children. I am attempting to implement an "ALL" category that, when selected, will automatically check all sibling checkboxes in the same category.
For example, clicking on ALL under the MUSIC category would select blues, jazz, rock n roll
Implementation:
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;
}
Progress with jQuery:
/**
* Expand sub categories when main category is clicked
*/
$('.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);
}
});
See it in action on jsfiddle: http://jsfiddle.net/SENV8/