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.

Answer 1

You can use .each() ^[docs] and the :checked ^[docs] pseudo selector:

$('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).