使用具有不同名称的 jQuery 到 select/deselect 单选按钮

Question

我有一个测验，它使用数据库中答案的 ID 作为名称，以检查它们是否正确。所以基本上我不能把它们都改成同一个名字。

无论如何，这给我留下了可以全部选中的单选按钮，但它不应该这样工作。我发现 jQuery 允许取消选中单选按钮，但我需要在您单击其他按钮时取消选中它们。

HTML:

<fieldset>
    <input type="radio" name="21">
    <label for="21">Answer 21</label>
    <input type="radio" name="22" class="checked">
    <label for="22">Answer 22</label>
    <input type="radio" name="23" class="">
    <label for="23">Answer 23</label>
    <input type="radio" name="24">
    <label for="24">Answer 24</label>
</fieldset>

脚本：

    $("input[type='radio']").click(function (event) {
    // If the button is selected.
    if ($(this).hasClass("checked")) {
        // Remove the placeholder.
        $(this).removeClass("checked");
        // And remove the selection.
        $(this).removeAttr("checked");
        // If the button is not selected.
    } else {
        // Remove the placeholder from the other buttons.
        $("input[type='radio']").each(function () {
            $(this).removeClass("checked");
        });
        // And add the placeholder to the button.
        $(this).addClass("checked");
    }
});

所以如果 21 被选中并且我单击 22，则 21 应该取消选中

Answer 1

使用单选按钮的值传递id，并给它们取一个相同的名字。

<input type="radio" id="r21" value="21" name="radiobtns">
<label for="r21">21</label>

那你就不需要jQuery.

Answer 2

试试这个代码，除了被点击的以外，所有的单选按钮都将被取消选中。正如 Aron P Johny 所说，如果您想将所有单选按钮与特定问题和答案分组，那么请改用他的答案。

$("input[type='radio']").click(function (event) {       
            $("input[type='radio']").prop('checked',false);
            $(this).prop('checked',true);      
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
    <input type="radio" name="21">
    <label for="21">Answer 21</label>
    <input type="radio" name="22" class="checked">
    <label for="22">Answer 22</label>
    <input type="radio" name="23" class="">
    <label for="23">Answer 23</label>
    <input type="radio" name="24">
    <label for="24">Answer 24</label>
</fieldset>

Answer 3

如果你想让同一个字段集中的无线电组像一个无线电组一样工作，那么你可以简单地做

 $("input[type='radio']").click(function (event) {
     $(this).addClass("checked");    
     $(this).siblings('input[type="radio"]').prop('checked', false).removeClass('checked')
 });

演示：Fiddle

Answer 4

So if 21 is checked and I click 22, 21 should uncheck 如果这是你想要的，你并不需要 jQuery..

<fieldset>
 <input type="radio" name="radio_button">
 <label for="21">Answer 21</label>
 <input type="radio" name="radio_button" class="checked">
 <label for="22">Answer 22</label>
 <input type="radio" name="radio_button" class="">
 <label for="23">Answer 23</label>
 <input type="radio" name="radio_button">
 <label for="24">Answer 24</label>
</fieldset>

只需确保它们都具有相同的名称..

使用具有不同名称的 jQuery 到 select/deselect 单选按钮

Using jQuery to select/deselect radio buttons with different names

html

javascript

jquery

radio-button