HTML Radio checked Property: Radio Checked

HTML Radio checked Property: Control Radio Button State

The HTML checked property of a radio button is a boolean attribute that indicates whether the radio button is currently selected or not. This property allows developers to programmatically control the checked state of radio buttons using JavaScript, enabling dynamic and interactive form elements.

What is the checked Property?

The checked property reflects the HTML checked attribute. When set to true, the radio button is selected; when set to false, it is deselected. This is particularly useful when you need to:

• Dynamically update the state of a radio button based on user interactions or data changes.
• Initialize a form with certain radio buttons pre-selected.
• Implement custom form validation or logic based on radio button selections.

Syntax

The checked property can be accessed and modified using JavaScript.

Getting the checked state:

const isChecked = radioElement.checked; // Returns true or false

Setting the checked state:

radioElement.checked = true; // Selects the radio button
radioElement.checked = false; // Deselects the radio button

Attribute Values

The checked property accepts boolean values:

Value	Description
`true`	The radio button is selected.
`false`	The radio button is deselected.

Examples

Let’s explore several examples to demonstrate how to use the checked property effectively.

Basic Example: Setting checked on Page Load

This example shows how to set the checked property of a radio button when the page loads.

<input type="radio" id="option1" name="options" value="1" />
<label for="option1">Option 1</label><br />

<input type="radio" id="option2" name="options" value="2" />
<label for="option2">Option 2</label><br />

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const option1 = document.getElementById("option1");
    option1.checked = true;
  });
</script>

In this example, Option 1 will be selected by default when the page loads.

Dynamically Changing checked State

This example demonstrates how to dynamically change the checked state of a radio button using a button click.

<input type="radio" id="dynamicOption1" name="dynamicOptions" value="1" />
<label for="dynamicOption1">Option 1</label><br />

<input type="radio" id="dynamicOption2" name="dynamicOptions" value="2" />
<label for="dynamicOption2">Option 2</label><br />

<button id="toggleButton">Toggle Option 2</button>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const dynamicOption2 = document.getElementById("dynamicOption2");
    const toggleButton = document.getElementById("toggleButton");

    toggleButton.addEventListener("click", function () {
      dynamicOption2.checked = !dynamicOption2.checked;
    });
  });
</script>

Clicking the “Toggle Option 2” button will toggle the checked state of Option 2.

Using checked in Form Validation

This example shows how to use the checked property to validate whether a radio button is selected before submitting a form.

<form id="myForm">
  <input type="radio" id="validateOption1" name="validateOptions" value="1" />
  <label for="validateOption1">Option 1</label><br />

  <input type="radio" id="validateOption2" name="validateOptions" value="2" />
  <label for="validateOption2">Option 2</label><br />

  <button type="submit">Submit</button>
</form>

<p id="validationMessage" style="color: red;"></p>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("myForm");
    const option1 = document.getElementById("validateOption1");
    const option2 = document.getElementById("validateOption2");
    const validationMessage = document.getElementById("validationMessage");

    form.addEventListener("submit", function (event) {
      if (!option1.checked && !option2.checked) {
        event.preventDefault();
        validationMessage.textContent = "Please select an option.";
      } else {
        validationMessage.textContent = "";
      }
    });
  });
</script>

If no radio button is selected when the form is submitted, a validation message will appear.

Complex Example: Dependent Radio Buttons

This example illustrates a more complex scenario where selecting one radio button enables another set of radio buttons.

<input type="radio" id="enableOptions" name="enableGroup" value="enable" />
<label for="enableOptions">Enable Options</label><br />

<input type="radio" id="disableOptions" name="enableGroup" value="disable" />
<label for="disableOptions">Disable Options</label><br />

<div id="dependentOptions" style="display: none;">
  <input
    type="radio"
    id="dependentOption1"
    name="dependentOptions"
    value="1"
  />
  <label for="dependentOption1">Dependent Option 1</label><br />

  <input
    type="radio"
    id="dependentOption2"
    name="dependentOptions"
    value="2"
  />
  <label for="dependentOption2">Dependent Option 2</label><br />
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const enableOptions = document.getElementById("enableOptions");
    const disableOptions = document.getElementById("disableOptions");
    const dependentOptionsDiv = document.getElementById("dependentOptions");

    enableOptions.addEventListener("change", function () {
      if (enableOptions.checked) {
        dependentOptionsDiv.style.display = "block";
      }
    });

    disableOptions.addEventListener("change", function () {
      if (disableOptions.checked) {
        dependentOptionsDiv.style.display = "none";
      }
    });
  });
</script>

Selecting “Enable Options” will display the dependent radio buttons, while selecting “Disable Options” will hide them.

Tips and Best Practices

• Use Labels: Always associate radio buttons with <label> elements for accessibility.
• Consistent Naming: Ensure that radio buttons within the same group have the same name attribute.
• Initial State: Use the checked attribute in HTML to set the initial state of a radio button when the page loads.
• Event Handling: Use the change event to detect when the checked state of a radio button changes.

Browser Support

The checked property is supported by all modern browsers.

• Chrome
• Firefox
• Safari
• Edge
• Opera

Conclusion

The checked property of HTML radio buttons provides developers with powerful control over the state of radio buttons using JavaScript. By dynamically setting and retrieving the checked state, you can create interactive forms, implement custom validation logic, and enhance the user experience of your web applications. 🚀