Question

I am trying to use these custom MacOSX-style check boxes on my site (it’s a jQuery plugin), but when I check one, it doesn’t actually trigger the $('#input').is(':checked'); until you uncheck and then it gets messed up.

Whenever you check a box, I add some CSS to the line that is checked to add a yellow background to it. But, I’m having trouble with them. This image explains it below:

I don’t understand why it does this. This is my checkIt() function that adds the yellow background when you check a line:

function checkIt(id) {
    if ($('#checkbox_' + id).is(':checked')) {
        $('#' + id).addClass("selected");
    }
    else {
        $('#' + id).removeClass("selected");
    }
}

And I call this onclick when the checkbox is clicked. Here is some example markup that is generated by the PHP:

<span class="inbox_check_holder">
<input type="checkbox" value="96874" onclick="checkIt(96874)" id="checkbox_96874" class="inbox_check" />
<div class="star_clicker" id="star_96874" onclick="addStar(96874)" title="Not starred"><span id="starimg_96874" class="not_starred"></span></div>
</span>

I’m thinking it is something to do with this custom checkbox jQuery plugin adding in extra elements over the <input />.

Here’s the jQuery checkbox plugin page if you need to see it, they have tons of examples on it. (Obviously) I am using the “Safari” skin.

Answer 1

try

$(".inbox_check").live("change",function(e){
e.stopPropagation();
if($(this).is(":checked"))
 $('#' + id).addClass("selected");
else
 $('#' + id).removeClass("selected");
});

http://jsfiddle.net/BXjg7/3/

with jquery 1.7 you can use on

$("body").on("change", ".inbox_check", function(e){
        e.stopPropagation();
    if($(this).is(":checked"))
     $('#' + id).addClass("selected");
    else
     $('#' + id).removeClass("selected");
});

http://jsfiddle.net/BXjg7/10/

delegate example

$("body").delegate(".inbox_check","change", function(e){
e.stopPropagation();  
    if($(this).is(":checked"))
     $('#' + id).addClass("selected");
    else
     $('#' + id).removeClass("selected");
});

http://jsfiddle.net/BXjg7/15/