Show an Element if a Checkbox is checked using JavaScript

# Table of Contents

# Show an Element if a Checkbox is checked in JavaScript

To show an element if a checkbox is checked:

Add a click event listener to the checkbox.
Check if the checkbox is checked.
If it is, set the display property of the hidden element to block.

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>

  <style>
    #box {
      display: none;
      width: 100px;
      height: 100px;
      background-color: salmon;
      color: white;
    }
  </style>

  <body>
    <p>Select an option:</p>

    <div>
      <input type="checkbox" id="show" name="show" />
      <label for="show">Show div</label>
    </div>

    <div id="box">Box is now shown</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript.

index.js

Copied!
const checkbox = document.getElementById('show');

const box = document.getElementById('box');

checkbox.addEventListener('click', function handleClick() {
  if (checkbox.checked) {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

show element if checkbox checked

The code for this article is available on GitHub

We added a click event listener to the checkbox.

Every time the checkbox is clicked, the handleClick function is invoked.

In the function, we check if the checkbox is checked and if it is, we set thedisplay property of the div element to block to show it.

If you uncheck the checkbox, the div's display property is set to none and the element is hidden.

We used the display property in the examples, however, you might need to use the visibility property depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and does not affect the layout. The document is rendered as though the element doesn't exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however, the element is invisible (not drawn). The element still affects the layout on your page as normal.

# Show an Element if a Checkbox is checked using visibility

Here is an example that uses the visibility property to show an element if a checkbox is checked.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <style>
    #box {
      visibility: hidden;
      width: 100px;
      height: 100px;
      background-color: salmon;
      color: white;
    }
  </style>

  <body>
    <p>Select an option:</p>

    <div>
      <input type="checkbox" id="show" name="show" />
      <label for="show">Show div</label>
    </div>

    <div id="box">Box is now shown</div>

    <div>More content here</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript.

index.js

Copied!
const checkbox = document.getElementById('show');

const box = document.getElementById('box');

checkbox.addEventListener('click', function handleClick() {
  if (checkbox.checked) {
    box.style.visibility = 'visible';
  } else {
    box.style.visibility = 'hidden';
  }
});

show element if checkbox checked visibility

The code for this article is available on GitHub

If you load the page, you'll see that the element takes up space even when it's hidden.

Even though the element is invisible, it still affects the layout of the page as normal.

Had we set the element's display property to none, it would have been taken out of the DOM and the next element would take its place on the page.

Using the display property to show or hide an element shifts the content on the page, which can be confusing and should be avoided when possible.

# 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.

Show an Element if a Checkbox is checked using JavaScript

# Table of Contents

# Show an Element if a Checkbox is checked in JavaScript

# Show an Element if a Checkbox is checked using visibility

# Additional Resources

Borislav Hadzhiev