CODEWITHSUNDEEP
jqueryhtmlcss
NDBoost
NDBoost

Reputation: 10634

how can i check all ul of nested checkboxes

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/

Upvotes: 2

Views: 6053

Answers (4)

nnnnnn
nnnnnn

Reputation: 150080

Perhaps something like this:

$(".events-child-category-all").click(function() {
   $(this).closest("ul").find("input[type=checkbox]").prop("checked",this.checked);
});

The .closest() method traverses up the DOM tree looking for a matching element, in this case finding the "ul" that the checkbox is located in.

If you're using a version of jQuery older than 1.6 you'll need .attr() instead of .prop().

Upvotes: 0

xdazz
xdazz

Reputation: 160903

$('.events-child-category-all').change( function(){
    $(this).parent().siblings().find(':checkbox').attr('checked', this.checked);
});​

http://jsfiddle.net/SENV8/3/

Upvotes: 7

ahren
ahren

Reputation: 16959

http://jsfiddle.net/ahren/SENV8/2/

$('.events-child-category-all').change( function(){
    var c = this.checked;
    if( c ){
        $(this).parent().siblings().find(':checkbox').prop('checked',true);
    }else{
        $(this).parent().siblings().find(':checkbox').prop('checked',false);
    }
});​

There are no siblings to the input that change fired from. You first need to go up one level to the parent li, then grab it's siblings, and use find() to get their checkboxes. Or you could use children() instead of find()

Upvotes: 0

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

What you need is this, because those checkboxes aren't siblings

$('.events-child-category-all').change( function(){
    var c = this.checked;
    if( c ){
        $(this).closest('.event-children').find(':checkbox').attr('checked',true);
    }else{
        $(this).closest('.event-children').find(':checkbox').attr('checked',false);
    }
});​

Working Fiddle

Upvotes: 0

Related Questions