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>

实施单选按钮的正确方法

4 个答案: