Set a Radio button to Checked/Unchecked using JavaScript

# 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

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

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

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

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

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

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

Copied!
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:

name - the name of the attribute to be set.
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.

You can use the search field on my Home Page to filter through all of my articles.

Set a Radio button to Checked/Unchecked using JavaScript