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

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">我的查询$("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

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

        })

    })