選擇兩個具有相同名稱，ID和值的單選按鈕

Question

在我的頁面上，我有兩個單選按鈕，分別是“是”和兩個“否”。 如果我在一個地方選中“是”，則選中第二個“是”按鈕，或者如果我不選中第二個“否”，我也將如何做。

以下是我的代碼：

<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>

如何同時選擇兩個收音機？

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> 

Answer 2

再次…… 網頁上每個元素的ID 應該是唯一的 ！

改用類。

但是盡管如此，仍然有可能實現這一目標。 您唯一需要更改的代碼就是單選按鈕的name ，因為所有具有相同名稱的單選按鈕都被假定為一個組，並且網絡瀏覽器默認只允許選擇其中一個。無法控制。

因此，請更改名稱以將單選按鈕重新分組為兩個不同的集合。

然后，您可以執行以下操作：

$("[id^='search_by_range']").change(function(){
    $("[id='"+$(this).attr("id")+"']").prop("checked", "checked");
});

這是JSFiddle演示

Answer 3

您可以在此處使用javascript來解決此問題，我可以提示您如何操作！

$('#search_by_range_yes').attr('checked','checked');
$('#search_by_range_yes').addAttr('checked');

這會有所幫助:)

謝謝

Answer 4

在同一組單選按鈕中，您不能選擇多個。 我為此使用了兩個不同的小組。

查找以下代碼：

<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_second" 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_second" type="radio" value="yes">
   <input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
   <br>
</fieldset>

JS代碼：

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

您可以在此處找到有效的演示： http : //jsfiddle.net/26g5rxs6/

Answer 5

1.i了解您的問題，因為所有單選按鈕都具有相同的名稱，所以會發生這些情況。

2.Same name單選按鈕有一組，並且只能在該組中選擇。

3.您可以按1.否搜索2.按范圍搜索對單選按鈕進行分組。 我通過以下代碼更新了您的代碼。

<fieldset>
   <input checked="checked" id="search_by_range_no" name="search_by_no" 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_no" 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>