Question

I have these audience groups with audiences hidden under it. When a user clicks on the audience group name, the hidden audiences will appear. now, what i want to do is when a user clicks on the audience group checkbox, only the audience checkboxes under it will be checked also.

currently i have the following, but with a little bug, when i clicked on an audience group checkbox, all the audience checkbox, even those not under is also checked. i want only those audience under that audience group will be checked.

you can see more of my code here: http://jsfiddle.net/CVnTy/

i have this example html:

<div class='audience-group'>
    <input type='checkbox' class='audience-group-checkbox' value='9' />
    <div class='audience-group-name'>
        JGG Enterprises
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='7' />
        <div class='audience-name'>
            Mucho, George
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='9' />
        <div class='audience-name'>
            Bo, Jen
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='10' />
        <div class='audience-name'>
            Gin, Junto
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='12' />
        <div class='audience-name'>
            Molina, Greg
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='36' />
        <div class='audience-name'>
            Berkely, Dada
        </div>
    </div>
</div>
</div>
<div>
    <div class='audience-group'>
        <input type='checkbox' class='audience-group-checkbox' value='8' />
        <div class='audience-group-name'>
            GBA Inc.
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='1' />
            <div class='audience-name'>
                Kapate, Jones
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='2' />
            <div class='audience-name'>
                Bingo, Gringo
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='4' />
            <div class='audience-name'>
                Doe, John
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='8' />
            <div class='audience-name'>
                Merio, Horhe
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='35' />
            <div class='audience-name'>
                Dalisay, JM
            </div>
        </div>
    </div>
</div>

and my jquery code:

$('.audience-group-name').click(function() {
    if ($(this).nextUntil('.audience-group').length) {
        $(this).nextUntil('.audience-group').toggle();
    } else {
        alert('No audience under this group.');
    }
});

$('.audience-group-checkbox').each(function() {
    $(this).click(function() {
        $('.audience-checkbox').attr('checked', $(this).is(':checked'));
    });
});

i’m kinda new to jquery, thanks for any help! 🙂

Answer 1

Instead of the each loop you’re currently using, you can use something like this instead:

$('.audience-group-checkbox').click(function() {
    $(this).closest(".audience-group").find(".audience-checkbox").prop("checked", this.checked); 
});

This gets the ancestor .audience-group element (closest – parent would also work here, if your HTML will always be as shown in the question), then gets all descendant elements with class “audience-checkbox” (find). Note that I’ve also used prop instead of attr, since checked is a DOM property. I’ve also used this.checked rather than wrapping this in another jQuery object, simply because it’s shorter and faster to access the property on the DOM element itself.

Here’s an updated fiddle.

Note that you don’t need the each. The majority of jQuery methods apply to all elements in the matched set, and click (and all event handler methods for that matter) is no exception.