Skip to main content

How to Check or Uncheck a Radio Button in JavaScript

In web forms, you often need to programmatically control the state of radio buttons, such as setting a default selection or updating the form based on user actions. The correct and most reliable way to do this is by setting the boolean checked property on the input element.

This guide will teach you the right way to check and uncheck a radio button, explain the important distinction between the .checked property and the HTML checked attribute, and show you how radio button groups work.

The Core Method: The .checked Property​

The most reliable and straightforward way to control the state of a radio button is to access its checked DOM property. This property is a simple boolean: setting it to true checks the button, and setting it to false unchecks it.

Problem: you have a group of radio buttons and need to programmatically select one.

HTML:

<input type="radio" id="option-yes" name="choice" value="yes"> Yes
<input type="radio" id="option-no" name="choice" value="no"> No

Solution: select the desired radio button and set its .checked property to true.

let yesRadioButton = document.getElementById('option-yes');
let noRadioButton = document.getElementById('option-no');

// To check a radio button:
yesRadioButton.checked = true;
console.log(yesRadioButton.checked); // Output: true
console.log(noRadioButton.checked);  // Output: false

// To uncheck a radio button (less common, as checking another handles this):
yesRadioButton.checked = false;
console.log(yesRadioButton.checked); // Output: false
note

This is the recommended best practice for its clarity and directness.

How Radio Button Groups Work​

Radio buttons are designed to work in a group, where only one option can be selected at a time. This grouping is defined by the name attribute. All radio buttons that share the same name value belong to the same group.

The browser automatically handles the logic of unchecking the other buttons in a group when one is checked.

Example of solution:

let yesRadioButton = document.getElementById('option-yes');
let noRadioButton = document.getElementById('option-no');

// Start by checking the "Yes" button
yesRadioButton.checked = true;
console.log('Is "Yes" checked?', yesRadioButton.checked); // Output: true
console.log('Is "No" checked?', noRadioButton.checked);   // Output: false

// Now, check the "No" button
noRadioButton.checked = true;
console.log('Is "Yes" checked?', yesRadioButton.checked); // Output: false (automatically unchecked)
console.log('Is "No" checked?', noRadioButton.checked);   // Output: true
note

You don't need to manually uncheck the other buttons; the browser does it for you.

The Common Pitfall: setAttribute vs. the .checked Property​

A frequent source of confusion is the difference between the HTML checked attribute and the JavaScript checked property.

  • HTML checked attribute: This sets the initial, default state of the radio button when the page first loads. Setting it with setAttribute('checked', 'true') after the page has loaded does not reliably update the button's current visual state in all browsers.
  • JavaScript .checked property: This reflects the current, live state of the radio button. It is a boolean property (true or false) and is the correct way to get or set the button's checked status dynamically.

Conclusion: For changing the state of a radio button after the page has loaded, always use the .checked property, not setAttribute().

Practical Example: Setting a Default Value on Page Load​

This script demonstrates how to select a radio button based on a value that might be loaded from a user's saved preferences or an API.

HTML:

<fieldset>
  <legend>Choose a notification frequency:</legend>
  <input type="radio" name="frequency" value="daily"> Daily
  <input type="radio" name="frequency" value="weekly"> Weekly
  <input type="radio" name="frequency" value="monthly"> Monthly
</fieldset>

JavaScript:

// Imagine this value is loaded from localStorage or an API
let savedPreference = 'weekly';

// Use querySelector to find the radio button with the matching value
let radioToSelect = document.querySelector(`input[name="frequency"][value="${savedPreference}"]`);

// If a matching radio button is found, check it
if (radioToSelect) {
  radioToSelect.checked = true;
  console.log('Set frequency to:', savedPreference);
}
note

This is a robust and common pattern for dynamically setting the state of a radio group.

Conclusion​

Controlling the state of radio buttons is simple if you use the correct DOM property.

  • To check a radio button, set its .checked property to true.
  • To uncheck a radio button, set its .checked property to false (though checking another button in the same name group will do this for you automatically).
  • Always use the .checked property for dynamic changes, and avoid using setAttribute('checked', ...) after the page has loaded, as it only controls the initial state.

Table of Contents