Question

http://jsfiddle.net/2Wpfw/16/

This seems really trivial question but I cannot for the life work this one out.

I have this jQuery var…

var $selectArea = $("ul#1 li input[type='checkbox'],
ul#2 li input[type='checkbox'], ul#3 li input[type='checkbox']");

and I want to run this…

$selectArea.closest('li').addClass('box-checked');

but only if the $selectArea attribute checked is "checked" – pretty simple right?

So I’ve tried this…

if ( $selectArea.attr("checked") == "checked" ) {

    $selectArea.closest('li').addClass('box-checked');

}

and…

$selectArea.filter('[checked="checked"]').closest('li').addClass('box-checked');

and this… (but think im sniffing up the wrong tree here)

$selectArea.is('[checked="checked"]').closest('li').addClass('box-checked');

And ideas would be awesome thanks.

http://jsfiddle.net/2Wpfw/16/

Answer 1

It’s because you’re doing it inside the change event for the checkbox. Go ahead an check one of the checkboxes – it will have the class added.

I would make the code that you want to happen to checked checkboxes a separate function so you can easily call it onload and onchange and have the same results.

Heres an updated fiddle showing you what I mean.

// reusable function
function check($elem)
{
    $elem.closest('li').toggleClass('box-checked', this.checked)
}

$selectArea.on('change', function() {
    check($(this));
});

$(function(){
    // onload get all checked inputs via the :checked selector 
    check($('input:checked'));
});

​