Skip to main content

How to Show or Hide an Element Based on Radio Button Selection in JavaScript

A common UI pattern in web forms is to conditionally show or hide an element based on which radio button in a group is selected. This is useful for revealing additional form fields, displaying contextual information, or changing the state of the UI.

This guide will teach you the modern, standard method for handling this interaction. You will learn how to listen for changes on a radio button group and toggle an element's visibility based on the selected option's value.

The Core Method: The change Event and the .value Property​

To build this functionality, we need two key pieces:

  • change Event Listener: The change event is the correct event to use. It fires on a radio button group whenever the selected button changes. We can listen for this on each radio button.
  • Value-Based Logic: Instead of hardcoding element IDs, a more robust approach is to check the value of the currently selected radio button to decide which element to show.

The Solution: A Single Event Handler for the Group​

The most efficient way to handle a radio group is to select all the radio buttons and attach the same event handler to each one. This handler will then check which button is currently selected.

Problem: you have a "Show" and "Hide" radio button, and you want to toggle the visibility of a div.

<fieldset>
  <legend>Select an option:</legend>
  <input type="radio" id="show" name="visibility" value="show">
  <label for="show">Show</label>
  
  <input type="radio" id="hide" name="visibility" value="hide" checked>
  <label for="hide">Hide</label>
</fieldset>

<div id="box" style="display: none; border: 1px solid #ccc; padding: 10px;">
  This box is now visible!
</div>
note

Using the same name attribute is what groups the radio buttons together, ensuring only one can be selected at a time.

Solution:

const radioButtons = document.querySelectorAll('input[name="visibility"]');
const box = document.getElementById('box');

radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // `this.value` refers to the value of the radio button that was just selected.
    if (this.value === 'show') {
      box.style.display = 'block';
    } else {
      box.style.display = 'none';
    }
  });
});
note

This approach is clean and scalable. You are not tying your logic to specific element IDs (#show or #hide), but rather to the value of the selected option, which is more maintainable.

Practical Example: A "Shipping Address" Form​

This is a classic use case. A form asks if the shipping address is the same as the billing address. If the user selects "No," an additional form section is revealed.

<fieldset>
  <legend>Shipping Address</legend>
  <input type="radio" name="shipping" value="same" checked> Same as billing
  <input type="radio" name="shipping" value="different"> Use a different address
</fieldset>

<div id="shipping-address-box" style="display: none;">
  <!-- Additional form fields for the shipping address would go here -->
  <p>Please enter your shipping address...</p>
</div>
const shippingRadios = document.querySelectorAll('input[name="shipping"]');
const shippingAddressBox = document.getElementById('shipping-address-box');

// A single handler to manage the visibility
const handleShippingChange = (event) => {
  if (event.target.value === 'different') {
    shippingAddressBox.style.display = 'block';
  } else {
    shippingAddressBox.style.display = 'none';
  }
};

// Attach the same handler to the 'change' event of each radio button
shippingRadios.forEach(radio => {
  radio.addEventListener('change', handleShippingChange);
});
note

This is a robust and common pattern for creating dynamic and interactive forms.

Conclusion​

Showing and hiding elements based on a radio button selection is a simple task with modern JavaScript.

  • The recommended best practice is to select all radio buttons in a group (using a shared name attribute like querySelectorAll('input[name="groupName"]')).
  • Attach a change event listener to each radio button.
  • Inside a single event handler, check the .value of the selected radio button to determine which element to show or hide, typically by toggling its display CSS property.

This value-based approach is more flexible and maintainable than tying your logic to specific element IDs.

Table of Contents