TransWikia.com

Can i uncheck radio button?

Stack Overflow Asked by frankfurt on December 23, 2021

i want to ask you. The radio button shouldn’t be unchecked, but I want to make it unchecked.

I have made the code as below, but it still doesn’t work. What is wrong with my code? and please give an example of the code that I have made.

Radio Button code

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

when i click Hiit option the code will be like this

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

when i uncheck the Hiit option, code will be like this and check is not lost

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

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

3 Answers

In case someone is trying to uncheck radio buttons but using vanilla js, you can achieve that by set radio.checked to false.

Here's an example:

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

Vanilla js:

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

Answered by Nurul Huda on December 23, 2021

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

Answered by Anil Singh on December 23, 2021

You need to change $(this).removeAttr('checked'); to $(this).prop('checked', false);

Answered by dave on December 23, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP