jquery highlight table row if checkbox is checked

Question

I know how to highlight a table row, if I "click" an element.

But when I open a page, some checkboxes are already checked. I want to highlight those rows, using jquery, when the page loads.

I gave all my checkboxes a class of "checkboxes". Here's what I got so far:

$(document).ready(function(){ 

   if( $('.checkboxes').attr("checked") == true ){ /*not sure how to detect a row*/  }

});

I'm not sure what to put inside.

The closest I got was to place this:

$(this).closest('tr').addClass("pinkrow");

But the $(this) obviously doesn't detect.

Felix Kling · Accepted Answer · 2011-08-26 23:52:57Z

5

$('tr .checkboxes:checked').each(function() {
    $(this).closest('tr').addClass('pinkrow');
});

If you want to use pure CSS selectors only, you can test whether an element is checked with the DOM element's checked property:

$('tr .checkboxes').each(function() {
    if(this.checked) {
        $(this).closest('tr').addClass('pinkrow');
    }
});

Also note that tr .checkboxes only selects those .checkboxes elements, which are in a table row (in case there are others).

answered Aug 26, 2011 at 23:45

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I didn't even consider the .each() selector. Nice. thanks for the reminder.