Show an Element if Checkbox is checked using JavaScript

avatar

Borislav Hadzhiev

Thu Jan 06 20222 min read

banner

Photo by Mario Klassen

Show an Element if Checkbox is checked using JavaScript #

To show an element if a checkbox is checked:

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

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <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>

And here is the related JavaScript.

index.js
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'; } });

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.

element shown checkbox checked

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 has no effect on the layout. The document is rendered as though the element does not 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). It still affects the layout on your page as normal.

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

index.html
<!DOCTYPE html> <html lang="en"> <head> <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>

And here is the related JavaScript.

index.js
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'; } });
If you load the page, you'll see that the element takes its space, event when it's hidden.

element hidden visibility hidden

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

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

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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee