Set a Radio button to Checked/Unchecked using JavaScript

avatar

Borislav Hadzhiev

Thu Dec 30 20213 min read

banner

Photo by Kiril Dobrev

Set a Radio button to Checked/Unchecked using JavaScript #

To set a radio button to checked/unchecked, select the element and set it's checked property to true or false, e.g. myRadio.checked = true. When set to true, the radio button becomes checked and all other radio buttons with the same name attribute become unchecked.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input type="radio" id="yes" name="choose" value="yes" /> <label for="yes">Yes</label> <input type="radio" id="no" name="choose" value="no" /> <label for="no">No</label> <input type="radio" id="maybe" name="choose" value="maybe" /> <label for="maybe">Maybe</label> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const yesBtn = document.getElementById('yes'); // โœ… Set radio button to checked yesBtn.checked = true; // โœ… Set radio button to unchecked // yesBtn.checked = false;

We selected the radio button using the document.getElementById method.

We then set the element's checked property to true.

If you need to uncheck a specific radio button, set its checked property to false.

index.js
const yesBtn = document.getElementById('yes'); // โœ… Set radio button to checked yesBtn.checked = true; // โœ… Set radio button to unchecked yesBtn.checked = false;

Note that checking a radio button, automatically unchecks all other radio buttons with the same name attribute.

index.js
const yesBtn = document.getElementById('yes'); yesBtn.checked = true; const noBtn = document.getElementById('no'); noBtn.checked = true;
We first checked the yes radio button, but when we checked the no button, the yes button got automatically unchecked.

You can set a radio button to be checked by default by setting the checked property directly on the input field.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ๐Ÿ‘‡๏ธ this one is checked by default --> <input type="radio" checked id="yes" name="choose" value="yes" /> <label for="yes">Yes</label> <input type="radio" id="no" name="choose" value="no" /> <label for="no">No</label> <input type="radio" id="maybe" name="choose" value="maybe" /> <label for="maybe">Maybe</label> <script src="index.js"></script> </body> </html>
Note that if you don't assign the same name attribute value to all of the radio input fields in the group, you will be able to check multiple radio buttons at the same time.

If this is the behavior your use case requires, you should be using a checkbox instead of a radio button.

You might see examples online that use the setAttribute and removeAttribute methods to check and uncheck a radio button.

index.js
const yesBtn = document.getElementById('yes'); // โœ… Check radio button yesBtn.setAttribute('checked', ''); // โœ… Uncheck radio button // yesBtn.removeAttribute('checked');

This is also perfectly fine, however there are a couple of things to keep in mind when using the setAttribute method.

The method takes the following 2 parameters:

  1. name - the name of the attribute to be set.
  2. value- the value to assign to the attribute.
If the attribute already exists on the element, the value is updated, otherwise a new attribute is added with the specified name and value.

When setting the value of a boolean attribute, such as checked, we can specify any value for the attribute and it will work.

If the attribute is present at all, regardless of the value, its value is considered to be true.

If a boolean attribute, such as checked, is not present, the value of the attribute is considered to be false.

When setting the checked attribute, we pass an empty string as the value for the attribute, because it's a best practice to set boolean attributes without a value.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee