javascript - 当我单击单选按钮时，它的 true 或自动其他 Span 值变为 false

Question

当我单击单选按钮时，span 文本更改为 true 或其他应为 false。

这段代码工作得很好:

$('table').on('change', ':radio', function() {
 $(this).next('span').text('True').closest('td')
       .siblings().find('span').text('False');
});

<tr>
  <td><input type="radio" name="attandance"><span>True</span></td>
  <td><input type="radio" name="attandance"><span>True</span></td>
  <td><input type="radio" name="attandance"><span>True</span></td>
</tr>

当我点击单选按钮时，它变为“True”，当我们点击同一行的另一个单选按钮时，它保持不变。

我想再次将它转换回来，从 true 到 false。

希望你们都明白我的意思。

Answer 1

问题是单选按钮总是被选中，因为更改事件是在选定的按钮上触发的，而不是在所有按钮上触发的。所以你需要将 correct 设置为 True，将其余的设置为 False，我会这样做:

$('table').on('change', ':radio', function () {
    $(this).next('span').text('True').closest('td')
           .siblings().find('span').text('False');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td> <input  type='radio' name='attandance' ><span>False</span></td>
<td> <input  type='radio' name='attandance' ><span>False</span></td>
<td> <input  type='radio' name='attandance' ><span>False</span></td>
</tr>
</table>

编辑:还有一个好处，你可以在没有 JS 的情况下使用它:

input[type="radio"]:not(:checked) + span::before {
    content: 'False';
}
input[type="radio"]:checked + span::before {
    content: "True";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td> <input  type='radio' name='attandance' ><span></span></td>
<td> <input  type='radio' name='attandance' ><span></span></td>
<td> <input  type='radio' name='attandance' ><span></span></td>
</tr>
</table>