I've got a checkbox inside a table, and when you click on it, it'll change the background colour accordingly like so...

$("#table tr td :checkbox").bind("click change", function() {
    $this = $(this); // cache the jquery object
    if($this.is(':checked')) { $this.closest('tr').css('background-color', 'lightyellow'); }
    else { $this.closest('tr').css('background-color', '#fff'); }
});

That works just fine, however, I figured I'd like to go one better, so anywhere on the table row you click, it'll check the box and highlight the row.

I tried using this code, but it doesn't work unfortunately:

$("table tr").bind("click", function() {
    $(this).parents("tr").find(":checkbox").attr('checked');
});

And here's the HTML code (removed excessive stuff to improve readability...

<td>Name</td>
<td>Description</td>
<td><input type="checkbox"></td>

Any help would be very much appreciated, thank you!

I've got a checkbox inside a table, and when you click on it, it'll change the background colour accordingly like so...

$("#table tr td :checkbox").bind("click change", function() {
    $this = $(this); // cache the jquery object
    if($this.is(':checked')) { $this.closest('tr').css('background-color', 'lightyellow'); }
    else { $this.closest('tr').css('background-color', '#fff'); }
});

That works just fine, however, I figured I'd like to go one better, so anywhere on the table row you click, it'll check the box and highlight the row.

I tried using this code, but it doesn't work unfortunately:

$("table tr").bind("click", function() {
    $(this).parents("tr").find(":checkbox").attr('checked');
});

And here's the HTML code (removed excessive stuff to improve readability...

<td>Name</td>
<td>Description</td>
<td><input type="checkbox"></td>

Any help would be very much appreciated, thank you!

• javascript
• jquery
• input

3 Answers 3

The event your handling is the tr click. The parent is the table so that will not help. All you need to do is use find() from the this context.

I would use .live to avoid multiple event handlers when one will do.

Assuming you only have one checkbox in the row then use the following. (note it uses tr's inside tbody to avoid running this on thead rows)

$("table>tbody>tr").live("click", function() {
    $(this).find(":checkbox").attr('checked', 'checked');
});

UPDATE

If you want to toggle it try something like

$("table>tbody>tr").live("click", function(ev) {
        var $checkbox = $(this).find(":checkbox");
        //check to see we have not just clicked the actual checkbox
        if ( !$(ev.target).is(':checkbox') ){
            $checkbox.is(':checked') ? $checkbox.removeAttr('checked')
                                     : $checkbox.attr('checked', 'checked')
        }
 });

You want to change this:

$(this).parents("tr").find(":checkbox").attr('checked');

to this:

$(this).parents("tr").find(":checkbox").attr('checked', 'checked');

Otherwise all you're doing is reading the checked attribute, not setting it.

I think you are just forgetting to set the value of the attribute.

$("table tr").bind("click", function() {
    $(this).find(":checkbox").attr('checked', 'checked');
});

The jQuery Docs on Attributes might be of some assistance.

Credit to redsquare for noticing that the .parent("tr") is not needed.