默认情况下选中此复选框时，可即时更改行的背景色

Question

我有一个用php动态生成的表。 如果选中了最后一个复选框（在名为“ OK”的列中），我需要更改表格整行的颜色。 我在这里的其他文章中找到了此代码，并且工作正常，除了颜色切换仅在单击时才起作用，而默认情况下未选中则不起作用。

据我了解，问题在于javascript代码正在调用“复选框更改时”功能，并且在加载页面时没有任何变化。 但是我不知道如何在页面加载时修改脚本以使其也起作用:(

 $('input[name="chkOrgRow"]').on('change', function() { $(this).closest('tr').toggleClass('yellow', $(this).is(':checked')); }); 

 .yellow { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <table> <tr> <td> C1 </td> <td> C2</td> <td> C3 </td> <td> C4 </td> <td> OK </td> <td> &nbsp; </td> </tr> <tr> <td><input type='checkbox' name='whatever' /></td> <td>data</td> <td>data</td> <td>data</td> <td><input type='checkbox' name='chkOrgRow' /></td> <td> &nbsp; </td> </tr> <tr> <td>data</td> <td><input type='checkbox' name='whatever' /></td> <td>data</td> <td>data</td> <td><input type='checkbox' name='chkOrgRow' checked="checked" /></td> <td><--- This must be highlighted because the OK checkbox is enabled</td> </tr> <tr> <td>data</td> <td>data</td> <td><input type='checkbox' name='whatever' /></td> <td>data</td> <td><input type='checkbox' name='chkOrgRow' /></td> <td> &nbsp; </td> </tr> </table> 

Answer 1

获取jQuery以在页面加载时运行该函数。

$(function() {
    $('input[name="chkOrgRow"]:checked').closest('tr').addClass('yellow');
});

http://jsfiddle.net/88oq246w/2/

Answer 2

这可以使用.closest()和.next() jQuery函数来实现。

$('input[name="chkOrgRow"]').on('change', function() {
  $(this)
  .closest('td') // find the closest td ( parent of input ) , you can also use .parent() for this
  .next('td') // find the next occuring td element
  .toggleClass('yellow', $(this).is(':checked')); // toggles the class 'Yellow' if checked
});

示例： http ： //jsfiddle.net/r6okrvm1/

更新：为所选inputs设置页面加载时的类'Yellow'

$().ready(function(){
$('input[name="chkOrgRow"]:checked').closest('td').next('td').toggleClass('yellow');
  });

示例： http ： //jsfiddle.net/r6okrvm1/1/