Question

I have a list of checkboxes inside a table with a simple jQuery function that allows the user to click anywhere in the table row to check/uncheck the checkbox. It works great, except when the user actually clicks on the checkbox. It doesn’t work then. Any ideas? Here is my code:

HTML:

<tr onClick="checkBox()">...</tr>

jQuery:

function checkBox() {

var ischecked = $('input#myContacts').attr("checked");

if(ischecked)
{
    $('input#myContacts').attr("checked", false);
}
else
{
    $('input#myContacts').attr("checked", true);
}

return false;
}

Answer 1

You can use event.stopPropagation to avoid your input#myContacts‘s click event propagates to the tr‘s click event. Also, I can’t believe you are mixing jQuery and DOM in that way yet, when you should be using jQuery Events.

$(document).ready(function(){
  $("input#myContacts").click(function(e){
    e.stopPropagation();
  });
});