jquery - 通过具有不同名称的 jQuery 自动取消选中单选按钮

Question

我觉得这是一个超级基本的问题，但搜索并没有发现任何问题。

精简的 HTML：

<input name="ID_1" type="radio" value="1" id="A01" /> A01<br>
<input name="ID_1" type="radio" value="2" id="A02" /> A02<br>

<input name="ID_2" type="radio" value="1" id="A01" /> A01<br>
<input name="ID_2" type="radio" value="2" id="A02" /> A02<br>

假设用户点击了第一个收音机。

然后用户点击第三个收音机。

我想要的是取消选中第一个收音机……反之亦然。

第二台收音机和第四台收音机也一样。

谢谢！

标签： jqueryradio-button

Answer 1

我将ID更改为类。然后，当任何单选按钮更改时，逻辑就会运行。它找到所有具有相同类的单选按钮，排除刚刚更改的单选按钮，并取消选中具有相同类的另一个。

$(':radio').on('change', e => {
  $('.'+ e.target.className).not(e.target).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input name="ID_1" type="radio" value="1" class="A01" /> A01<br>
<input name="ID_1" type="radio" value="2" class="A02" /> A02<br>

<input name="ID_2" type="radio" value="1" class="A01" /> A01<br>
<input name="ID_2" type="radio" value="2" class="A02" /> A02<br>