Show/hide html element based on checkbox control

Question

Show an Element if Checkbox is checked using JavaScript #

To show an element if a checkbox is checked:

Nội dung chính Show

Show an Element if Checkbox is checked using JavaScript #
How do I show and hide input fields based on checkbox?
How do I show and hide div elements using checkboxes?
How do I hide a check box in HTML?
How Show input text when 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 in this article.

Copied!
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 divlabel>
    div>

    <div id="box">Box is now showndiv>

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

And here is the related JavaScript.

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

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 has no effect on 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.

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

Copied!
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 divlabel>
    div>

    <div id="box">Box is now showndiv>

    <div>More content herediv>

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

And here is the related JavaScript.

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/hide html element based on checkbox control

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 be taken out of the DOM and the next element would take it's 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.

How do I show and hide input fields based on checkbox?

To show or hide the field, we are applying CSS through jQuery css() method. We are passing CSS display property. To hide the field, we set the display property to none and to show it we set the display property block. So you have seen how to show or hide input field depending upon a checkbox field.

How do I show and hide div elements using checkboxes?

Approach:.

Selector name for checkbox is same as the element which is used to display the. content..

CSS display property of each element is set to none using display: none; for hiding the element initially..

Use . toggle() method for displaying and hiding the element for checking and unchecking the box..

How do I hide a check box in HTML?

There are several ways to hide the :.

Use display: none..

Use visibility: hidden..

Use opacity: 0..

Position it off the screen using position: absolute and an insanely big value like left: -9999px..

How Show input text when checkbox is checked?

Display Text When Checkbox Is Checked in JavaScript.

Use JavaScript .checked Property to Display Text When Checkbox Is Checked..

Use jQuery is() Function and JavaScript .checked Property to Display Text When Checkbox Is Checked..

Use jQuery ready and click Events to Display Text When Checkbox Is Checked..

kode html Checkbox content CSS jQuery hide element

Show/hide html element based on checkbox control

Show an Element if Checkbox is checked using JavaScript #

How do I show and hide input fields based on checkbox?

How do I show and hide div elements using checkboxes?

How do I hide a check box in HTML?

How Show input text when checkbox is checked?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội