javascript - 单击单元格时检查单选按钮并更改单元格的背景

Question

我想在鼠标单击单元格内的任意位置时选中单选按钮，并使用此操作更改单元格的颜色。当取消选中单选按钮时，颜色应该变回白色。

我的代码是

$("td").click(function() {
  $(this).find('input:radio').attr('checked', true);
  $(this).toggleClass('green', $(this).is(":checked"));
});

.green
{
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
    </tr>
    <tr>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
    </tr>
  </tbody>
</table>

但这无助于实现这两个 Action 。有什么帮助吗？

Answer 1

首先，当您在单元格中的任意位置单击时选择 radio ，将其包裹在 label 中，标签上设置了 display: block。然后您无需任何 JS 即可免费获得行为。

要在包含选中 radio 的 td 上设置背景，将 change 事件处理程序挂接到 radio 本身，然后获取 closest() td 并在其上调用 addClass()。 toggleClass() 在这里不相关，因为您只能选择一个 radio ，永远不能取消选择它。您可以改为使用 siblings() 从任何其他单元格中删除 green 类。试试这个:

$(':radio').on('change', function() {
  $(this).closest('td').addClass('green').siblings().removeClass('green');
});

table label {
  display: block;
}

table td.green {
  background-color: #0C0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td style="width: 50px;"><label><input type="radio" name="name1"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name1"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name1"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name1"></label></td>
    </tr>
    <tr>
      <td style="width: 50px;"><label><input type="radio" name="name2"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name2"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name2"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name2"></label></td>
    </tr>
  </tbody>
</table>