javascript - 选择两个具有相同名称、ID、值的单选按钮

Question

在我的页面上，我有两个表示是的单选按钮和两个表示否的单选按钮。如果我在一个地方选中"is"，它会选中第二个"is"按钮，或者如果我选中“否”，那么第二个“否”按钮也会选中。

以下是我的代码:

<fieldset>
   <input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
   <input class="input-long" id="size10" name="size10" type="text" value="27">
   <br>
   <input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
   <input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
   <br>
   <input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
   <input class="input-long" id="size20" name="size20" type="text" value="65">
   <br>
   <input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
   <input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
   <br>
</fieldset>

如何同时选择两个 radio ？

Answer 1

您不能在同一单选按钮组中选中多个按钮。你需要给这两个集合不同的名字。我使用了 search_by_range_A 和 search_by_range_B。 ID 也必须是 unix。

要使其自动检查另一个按钮，请使用获取值的 .change() 处理程序，然后选择具有相同值的另一个复选框并检查它。

$(":radio").change(function() {
  var value = $(this).val();
  $(":radio[value=" + value + "]").prop("checked", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <input checked="checked" id="search_by_range_A_no" name="search_by_range_A" type="radio" value="no">
  <input class="input-long" id="size10" name="size10" type="text" value="27">
  <br>
  <input id="search_by_range_A_yes" name="search_by_range_A" type="radio" value="yes">
  <input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
  <br>
  <input checked="checked" id="search_by_range_B_no" name="search_by_range_B" type="radio" value="no">
  <input class="input-long" id="size20" name="size20" type="text" value="65">
  <br>
  <input id="search_by_range_B_yes" name="search_by_range_B" type="radio" value="yes">
  <input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
  <br>
</fieldset>