javascript - 如何更改复选框选择行的背景颜色

Question

我有 html 表格，还有一些带有复选框的行。复选框的选择我想用一些背景颜色突出显示该行。

<table>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
</table>

Answer 1

1. id 应该唯一
2. 不要使用内联事件处理程序
3. 不要使用内联样式，使用 CSS 类

$('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>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
</table>