我可以取消选中单选按钮吗？答案

【问题标题】：Can i uncheck radio button?我可以取消选中单选按钮吗？
【发布时间】：2020-07-24 06:11:20
【问题描述】：

我想问你。单选按钮不应取消选中，但我想取消选中。

我已经编写了如下代码，但它仍然无法正常工作。我的代码有什么问题？请举例说明我制作的代码。

单选按钮代码

<input type="radio" id="sidebar_workout_1" value="Hiit_1" name="workout">
<input type="radio" id="sidebar_workout_2" value="Yoga/Flexibility_2" name="workout">

当我点击 Hiit 选项时，代码将是这样的

<input type="radio" id="sidebar_workout_1" value="Hiit_1" name="workout" previousvalue="checked">
<input type="radio" id="sidebar_workout_2" value="Yoga/Flexibility_2" name="workout" previousvalue="false">

当我取消选中 Hiit 选项时，代码将是这样并且检查不会丢失

<input type="radio" id="sidebar_workout_1" value="Hiit_1" name="workout" previousvalue="false">
<input type="radio" id="sidebar_workout_2" value="Yoga/Flexibility_2" name="workout" previousvalue="false">

我的 Jquery

$("input[type='radio']").click(function() {
        var previousValue = $(this).attr('previousValue');
        var name = $(this).attr('name');

        if (previousValue == 'checked') {
            $(this).removeAttr('checked');
            $(this).attr('previousValue', false);
        } else {
            $("input[name=" + name + "]:radio").attr('previousValue', false);
            $(this).attr('previousValue', 'checked');
        }
    });

【问题讨论】：

预期的行为是什么？它应该如何工作？

标签： javascript jquery dom

【解决方案1】：

您需要将$(this).removeAttr('checked'); 更改为$(this).prop('checked', false);

【讨论】：

如果此答案解决了您的问题，请将其标记为解决方案。

【解决方案2】：

  Please try to this code


  $("input[type='radio']").click(function() {
            var previousValue = $(this).attr('previousValue');
            var name = $(this).attr('name');
            if (previousValue == 'checked') {
                $(this).prop('checked', false);
                $(this).attr('previousValue', false);
            } else {
                $("input[name=" + name + "]:radio").attr('previousValue', false);
                $(this).attr('previousValue', 'checked');
            }
        });

【讨论】：

用上面的评论解决了，谢谢

【解决方案3】：

如果有人试图取消选中单选按钮但使用的是 vanilla js，您可以通过将 radio.checked 设置为 false 来实现。

这是一个例子：

<div>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">Male</label>
</div>

<div>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">Female</label>
</div>

<button id="btnUncheck">Uncheck</button>

原版js：

document.querySelector('#btnUncheck')
    .addEventListener('click', e => {
        const radios = document.querySelectorAll('[type="radio"]')
        
        radios.forEach(radio => {
            radio.checked = false
        })
    })

【讨论】：