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

Question

我有一个 table 是用 php 即时生成的。如果选中最后一个复选框（在名为 "OK" 的列中），我需要更改 table 整行的颜色。我从其他 post 此处找到此代码并且工作正常，除了颜色切换仅在您单击它时起作用，而不是在默认情况下选中时起作用。

我知道问题是 javascript 代码正在调用函数 "on checkbox change" 并且在加载页面时没有任何变化。但是我不知道如何修改脚本以使其在页面加载时也能正常工作:(

$('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到运行函数on page load。

$(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/

更新：在页面加载时设置 class 'Yellow' 选择 inputs

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

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

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

Change background color of a row on the fly when checkbox is selected by default

html

javascript

php

jquery

jquery-events