Skip to main content

How to Show an Element if a Checkbox is Checked in JavaScript

A common UI pattern is to show or hide an element based on whether a checkbox is checked. This is useful for revealing optional form sections, enabling features, or toggling content. The standard and most effective way to do this is by listening for a change event on the checkbox and then updating the CSS display property of the target element.

This guide will teach you the modern, standard method for toggling an element's visibility based on a checkbox's state and explain the important difference between hiding an element with display: none versus visibility: hidden.

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

To achieve this, we need two key pieces:

  • change Event Listener: The change event is the correct event to listen for on a checkbox. It fires whenever the checked state of the box is changed by the user (either by clicking the box or its associated <label>).
  • .checked Property: This is a boolean property on the checkbox element that is true if the box is checked and false if it is not.

The Solution: Toggling the display Property​

The display CSS property is the most common way to hide and show elements. Setting it to none completely removes the element from the document layout.

Problem: you have a checkbox and a div that should only be visible when the box is checked.

<label>
  <input type="checkbox" id="show-details-checkbox">
  Show Details
</label>

<div id="details-box" style="display: none; border: 1px solid #ccc; padding: 10px;">
  Here are the extra details.
</div>

Solution:

let checkbox = document.getElementById('show-details-checkbox');
let detailsBox = document.getElementById('details-box');

checkbox.addEventListener('change', function() {
  // `this.checked` is true if the box is checked, and false if it's not.
  if (this.checked) {
    // If the checkbox is checked, display the div
    detailsBox.style.display = 'block';
  } else {
    // If the checkbox is unchecked, hide the div
    detailsBox.style.display = 'none';
  }
});
note

This code creates a direct link between the checkbox's state and the div's visibility.

display: none vs. visibility: hidden: A Key Difference​

It's crucial to understand the difference between the two main ways to hide an element:

  • display: none;:

    • The element is completely removed from the document flow.
    • It takes up no space on the page.
    • It's as if the element doesn't exist in the layout at all. This is usually what you want.

  • visibility: hidden;:

    • The element is made invisible, but it still occupies its original space in the layout.
    • This will leave a blank "hole" on the page where the element used to be.

For toggling form sections or optional content, display: none is almost always the correct choice.

Practical Example with Accessibility Improvements​

A more robust and accessible approach is to use a CSS class to control the visibility and to associate the checkbox with the content it controls using aria- attributes.

HTML:

<label>
  <input type="checkbox" id="terms-checkbox" aria-controls="terms-box">
  I agree to the terms and conditions.
</label>

<div id="terms-box" class="hidden" role="region" aria-hidden="true">
  <p>Here is the full text of the terms and conditions...</p>
</div>

CSS:

.hidden {
  display: none;
}

JavaScript:

let termsCheckbox = document.getElementById('terms-checkbox');
let termsBox = document.getElementById('terms-box');

termsCheckbox.addEventListener('change', function() {
  let isChecked = this.checked;

  // Use classList.toggle for cleaner state management
  termsBox.classList.toggle('hidden', !isChecked);
  
  // Update the ARIA attribute for screen readers
  termsBox.setAttribute('aria-hidden', !isChecked);
});

How This Improved Version Works​

  • CSS Class (.hidden): This is a better practice than setting inline styles directly. It keeps your styling rules in your CSS.
  • classList.toggle('hidden', !isChecked): This is a powerful shortcut. The toggle method will add the 'hidden' class if the second argument is true, and remove it if it's false. Since we want to hide it when the box is not checked, we pass !isChecked.
  • ARIA Attributes: aria-controls and aria-hidden create a semantic link between the checkbox and the content, which helps users with assistive technologies understand the relationship.

Conclusion​

Showing and hiding an element based on a checkbox's state is a fundamental UI pattern.

  • The recommended best practice is to listen for the change event on the checkbox.
  • Inside the handler, check the .checked property.
  • Toggle a CSS class (like .hidden) on the target element to control its display property. This is more maintainable than setting inline styles.

Table of Contents