2

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:

enter image description here

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.

1 Answer 1

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/

9
  • Would I put that in my checkIt() function?
    – Nathan
    Nov 19, 2011 at 3:24
  • sorry i didnt mentioned it in the answer, you dont need the onClick event of the checkbox when using the above code
    – Rafay
    Nov 19, 2011 at 3:25
  • My PHP dynamically creates the HTML, and I have to pass the ID in the function which is why I'm using onclick. I don't like using onclick that much, but for this I have to because of the IDs that need to be passed.
    – Nathan
    Nov 19, 2011 at 3:26
  • if you are dynamically generating the html use live, or delegate, or on (jquery 1.7), updated the answer, also you have the class name you dont need the ids...
    – Rafay
    Nov 19, 2011 at 3:29
  • But then how do I highlight the background of the selected line? When you click a checkbox, it is supposed to change the background of the message line. (you can see in my screenshot above) And, id is no longer defined. I do understand that I can use .inbox_check for the onchange, but the ID of the line to change the background of the selected message is why i need to pass the ID.
    – Nathan
    Nov 19, 2011 at 3:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.