Set a Radio button to Checked/Unchecked using JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 5, 2024
3 min

banner

# Set a Radio button to Checked/Unchecked using JavaScript

To set a radio button to checked/unchecked, select the element and set its 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.

index.html
<!DOCTYPE html> <html lang="en"> <head> <title>bobbyhadz.com</title> <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>
The code for this article is available on GitHub

And here is the related JavaScript code.

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

set radio checked unchecked

The code for this article is available on GitHub

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

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

# Setting a radio button to unchecked

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

index.js
const yesBtn = document.getElementById('yes'); // ✅ Set the radio button to checked yesBtn.checked = true; // ✅ Set the radio button to unchecked yesBtn.checked = false;
The code for this article is available on GitHub

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.

# Setting a radio button to be checked by default

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>

setting radio button checked by default

The code for this article is available on GitHub
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 use 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 the radio button yesBtn.setAttribute('checked', ''); // ✅ Uncheck the radio button // yesBtn.removeAttribute('checked');
The code for this article is available on GitHub

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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.