Check/uncheck radio button using javascript and html

Question

Please advise, how to uncheck the radio button using javascript? I have checked similar questions but could not figure it out.

function uncheck1(){
    let chkstatus = document.getElementById("radiobtn1").checked;
    if (chkstatus==true) {
        document.getElementById("radiobtn1").checked = false;
    } else if (chkstatus==false){
        document.getElementById("radiobtn1").checked = true;
    } 
}

<input onclick="uncheck1()" id="radiobtn1" name="grp1" type="radio" value="prashant">prashant</input>

After click the condition is true and script is setting value to false so value is not getting selected at all. Please advise where exactly modification required?

If i understand your requirement , you will need a checkbox instead of radio butto — brk
– brk, Commented Sep 15, 2020 at 14:37

HoldOffHunger · Accepted Answer · 2020-09-15 14:49:03Z

1

When you click a radio button, the onClick event will always think that the radio is checked, because that is how a radio works. Instead, use a second var to keep track of open status, and then set status accordingly....

var checked = false;
function uncheck1(){
    if(checked) {
         document.getElementById("radiobtn1").checked = false;
         checked = false;
         return;
    }
    checked = true;
}

<input onclick="uncheck1()" id="radiobtn1" name="grp1" type="radio" value="prashant">prashant</input>

I am now able to click the radio, see it get checked, click it again, and see it get unchecked.

answered Sep 15, 2020 at 14:49

HoldOffHunger

21.3k11 gold badges123 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Van de Laar · Accepted Answer · 2020-09-15 14:54:39Z

1

Add a button to toggle the radio button. You will see that it does work.

  <input type="button" onclick="uncheck1()" />

This is because you are toggling the radio onclick and doing the same action again with the function. So in fact you are toggling the checked status twice.

final code :

<input id="radiobtn1" name="grp1" type="radio" value="prashant" /> <label for="radiobtn1">prashant</label>

<input type="button" onclick="uncheck1()" />

Removed the onclick from the radio and added a proper label to make the radio work as expected.

edited Sep 15, 2020 at 14:54

answered Sep 15, 2020 at 14:45

Peter Van de Laar

3992 silver badges12 bronze badges

2 Comments

pgg08927 Over a year ago

Used a type="checkbox" insted of radio and it resolved my problem. Thanks Peter!

pgg08927 Over a year ago

Thanks peter this is also working with adding extra button.

SHOTART xW · Accepted Answer · 2023-07-20 05:46:24Z

0

When you click a radio button, the onClick event will always think that the radio is checked, because that is how a radio works. Instead, use a second var to keep track of open status, and then set status accordingly....

var checked = false;
var checked2 = "";
function uncheck1(name){
    if(checked && checked2 == name) {
         document.getElementById(name).checked = false;
         checked = false;
         return;
    }
    checked = true;
    checked2 = name
}

<input type="radio" id="test1" name="test"onclick="uncheck1('test1')" value="1" />
<input type="radio" id="test2" name="test"onclick="uncheck1('test2')" value="2" />
<input type="radio" id="test3" name="test"onclick="uncheck1('test3')" value="3" />

edited Jul 20, 2023 at 5:46

answered Jul 18, 2023 at 8:46

SHOTART xW

12 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Jeremy Field · Accepted Answer · 2025-09-20 23:45:27Z

0

Here's a different implementation which respects radio button groups (by name) and doesn't require any change to the literal <input type="radio"...> tag:

document.querySelectorAll("input[type=\"radio\"]").forEach((radio) => {
    radio.addEventListener("click", (event) => {
        if(event.target.dataset.checked == 'true') {
            event.target.checked = false;
            delete event.target.dataset.checked;
            event.target.dispatchEvent(new Event('change'));
        } else {
            for(const el of document.querySelectorAll(`input[name="${event.target.name}"]`))
                delete el.dataset.checked;
            event.target.dataset.checked = 'true';
        }
    });
});

edited Sep 20 at 23:45

answered Sep 19 at 1:26

Jeremy Field

6997 silver badges13 bronze badges

1 Comment

Jeremy Field Sep 20 at 2:49

Curious for feedback from downvoter

Collectives™ on Stack Overflow

Check/uncheck radio button using javascript and html

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related