1

当鼠标单击单元格内的任何位置时，我想检查一个单选按钮，并使用此操作来更改单元格的颜色。当单选按钮未选中时，颜色应该变回白色。

我的代码是

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

但这无助于实现这两个动作。请问有什么帮助吗？

4

4 回答 4

3

首先，当您单击单元格中的任何位置时选择收音机，将其包裹在label已display: block设置的收音机中。然后您无需任何 JS 即可免费获得该行为。

要设置td包含选中收音机的背景，请将change事件处理程序挂钩到收音机本身，然后获取closest() td并调用addClass()它。toggleClass()在这里不相关，因为您只能选择一个收音机，您永远不能取消选择它。您可以改为使用从任何其他单元格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>

于 2019-08-14T11:32:33.623 回答
2

There are a few little logical errors in your example:

1) checked is a property, not an attribute, so you should be using .prop() to set it (see guidance at https://api.jquery.com/attr/)

2) $(this).is(":checked") won't ever be true, because this represents the table cell, not the radio button

3) Regardless of point 2, it doesn't make any sense to test this value, because (if you check it correctly) you already know it's true due to the previous line of code. What you want to be doing is setting the class to green automatically, but also removing the "green" class from the other cells in the same row.

Here's a demo which achieves all that:

$("td").click(function() {
  $(this).find('input:radio').prop('checked', true);
  $(this).siblings().removeClass("green");
  $(this).addClass('green');
});
.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>

于 2019-08-14T11:36:31.660 回答
0

你应该像这样改变你的jQuery代码：

$("td").click(function() {
  $(this).find("input[type=radio]").prop("checked", true);
  $(this).siblings().removeClass("green");
  $(this).addClass("green");
});
于 2019-08-14T11:57:38.790 回答
0 

$("input:radio").change(function() {
  if($("input:radio").is(":checked")){
    $(this).parent("td").addClass("green").siblings("td").removeClass("green");
  }
  else{
    $(this).parent("td").removeClass("green").siblings("td").removeClass("green");
  }
  
});
.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>

于 2019-08-14T11:46:03.240 回答