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

Share Improve this question Follow edited May 10, 2023 at 9:12 Jonas 129k102102 gold badges327327 silver badges405405 bronze badges asked Aug 14, 2009 at 12:55 NickNick 1,2431313 gold badges2626 silver badges3737 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.