> now the checkbox itself doesn't have the ability to check or uncheck
What's happening is that when you click the checkbox directly, it
changes the state of the checkbox. But, the click event then bubbles
to the tr, where the handler changes it (back)!
There are several different ways to handle this problem. One would be
to put an event handler on every checkbox that would return false to
stop bubbling and prevent it from reaching your tr handler. If you
are using jQuery 1.3.1 you can use event delegation and the .closest()
method. That's nice because it only involves a single event handler on
the table.
$(".myTable").click(function(e){
var $chk = $(e.target).closest("tr").find(":checkbox");
if ( $chk[0] != e.target )
$chk.attr("checked", !$chk.attr("checked"));
});
If the handler sees that the actually clicked element (e.target) is a
checkbox, it doesn't toggle the state since the direct click took care
of it. In the other cases where the enclosing td or tr is clicked, it
manually toggles the state of the enclosed checkbox.
