javascript - 单击单选按钮时更改 div/表格行的背景颜色

Question

我正在制作一个带有单选按钮的选项列表，但它们在一个表格内，属于一个 TD。

我试图在按下单选按钮时用一种颜色突出显示表格行，但随后它突出显示了所有表格行，而不是我按下的那一行。

例如，一旦我按下:选项 1。我只想突出显示选项 1。

看这个例子:看 jsFiddle

Answer 1

使用相对选择器怎么样？此外，您不应该拥有多个具有相同 ID 的元素，因此我也修复了这一问题。

//jQuery implementation
$('[name=valgt]').click(function() {
    $(".checked").removeClass("checked");
    if($(this).is(':checked')) {
        $(this).closest('.crimeOption').addClass('checked');
    }
});

.checked {
    background: linear-gradient(to right, rgb(76, 140, 128), rgba(55, 119, 120, 1));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table>
  <thead>
    <tr>
      <th>Head
      </th>
    </tr>
  </thead>
  <tbody class="radio-list">
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />
        <label>Option 1.
          </td>
    </tr>
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />
        <label>Option 2.
          </td>
    </tr>
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />Option 3.
      </td>
    </tr>
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />Option 4.
      </td>
    </tr>
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />Option 5.
      </td>
    </tr>
  </tbody>
</table>