我可以取消单选按钮吗？

Question

我想问你。单选按钮不应该不被选中，但我想让它不被选中。

我已经按照下面的方式编写了代码，但是它仍然不起作用。我的密码怎么了？请举一个我所做的代码的例子。

无线按钮码

<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');
        }
    });

Answer 1

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

Answer 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');
            }
        });

Answer 3

如果有人试图取消选中单选按钮，但使用普通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
        })
    })