如果复选框被选中，jquery 突出显示表行

Question

如果我“单击”一个元素，我知道如何突出显示表格行。

但是当我打开页面时，一些复选框已经被选中。我想在页面加载时使用 jquery 突出显示这些行。

我给所有的复选框都设置了一类“复选框”。 这是我到目前为止所得到的:

$(document).ready(function(){ 

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

});

我不知道该放什么进去。

我得到的最接近的是放置这个:

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

但是$(this)显然没有检测到。

Answer 1

您可以使用.each() ^[docs]和 :checked ^[docs]伪选择器:

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

如果您只想使用纯 CSS 选择器，可以使用 DOM 元素的 checked 属性测试是否检查某个元素:

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

另请注意，tr .checkboxes 仅选择表格行中的那些.checkboxes 元素(以防还有其他元素)。