正确的方法来实现单选按钮

Question

我对jquery相当新，并且有一个关于如何实现3个不同ID的3个不同单选按钮的问题。我只想在任何时候选择一个单选按钮，这意味着，当我单击另一个单选按钮时，应该取消选中其他两个单元格并更新值。我的代码正在运行，但我不确定它是否是正确的方法。任何人都可以告诉我，如果可以用另一种方式完成吗？

谢谢！

$("#someID_1").click(function() {
  $("#someID_1").prop("checked", true);
  $("#someID_2").prop("checked", false);
  $("#someID_3").prop("checked", false);
  $("#someID_1").val("true");
  $("#someID_2").val("false");
  $("#someID_3").val("false");
});

$("#someID_2").click(function() {
  $("#someID_1").prop("checked", false);
  $("#someID_2").prop("checked", true);
  $("#someID_3").prop("checked", false);
  $("#someID_1").val("false");
  $("#someID_2").val("true");
  $("#someID_3").val("false");

});

$("#someID_3").click(function() {
  $("#someID_1").prop("checked", false);
  $("#someID_2").prop("checked", false);
  $("#someID_3").prop("checked", true);
  $("#someID_1").val("false");
  $("#someID_2").val("false");
  $("#someID_3").val("true");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="some_class">
  <ul>
    <li>
      <label for="someID_1" style="width:20%"></label>
      <input type="radio" id="someID_1" style="width: auto;">
    </li>
    <li>
      <label for="someID_2" style="width:20%"></label>
      <input type="radio" id="someID_2" style="width: auto;">
    </li>
    <li>
      <label for="someID_3" style="width:20%"></label>
      <input type="radio" id="someID_3" style="width: auto;">
    </li>
  </ul>
</div>

Answer 1

它只能用html完成。一个表单中的所有无线电都应具有相同的名称属性。

<label><input type="radio" name="someUniqueName">foo</label>
<label><input type="radio" name="someUniqueName">bar</label>
<label><input type="radio" name="someUniqueName">foo-bar</label>

Answer 2

如果您使用修复单选按钮，完全取决于您的需要，例如想使用3个收音机然后你可以使用如下HTML：

<form action="">
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

否则请使用javascript / jquery

document.getElementById("my_div").innerHTML = my_div.innerHTML +'<input type="radio" name="gender" value="male"> Male<br>';

上面的代码将在my_div中添加单个单选按钮

Answer 3

这里不需要Jquery。如果您的无线电具有相同的name，则任何时候始终只能选择一个。

Answer 4

如果你不能修改你的html或你想动态做，你可以使用.attr("name", "same_name")。

$("#someID_1, #someID_2, #someID_3").attr("name", "same_name");

//or :

$(".some_class input[type=radio]").attr("name", "same_name");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="some_class">
  <ul>
    <li>
      <label for="someID_1" style="width:20%"></label>
      <input type="radio" id="someID_1" style="width: auto;">
    </li>
    <li>
      <label for="someID_2" style="width:20%"></label>
      <input type="radio" id="someID_2" style="width: auto;">
    </li>
    <li>
      <label for="someID_3" style="width:20%"></label>
      <input type="radio" id="someID_3" style="width: auto;">
    </li>
  </ul>
</div>