如果使用 JavaScript 选中复选框，则显示元素

作者

目录

Show an Element if Checkbox is checked using JavaScript

  1. 如果在 JavaScript 中选中复选框，则显示元素
  2. 如果使用可见性选中复选框，则显示元素

如果在 JavaScript 中选中复选框，则显示元素

要在选中复选框时显示元素：

  1. 将click事件侦听器添加到复选框。
  2. 检查复选框是否被选中。
  3. 如果是，则将display隐藏元素的属性设置为block。

这是示例的 HTML。

索引.html
<!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>

这是相关的 JavaScript。

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

如果选中复选框则显示元素

我们click向复选框添加了一个事件监听器。

每次单击复选框时，handleClick都会调用该函数。

在函数中，我们检查复选框是否被选中，如果是，我们将元素display的属性设置为以显示它。divblock

如果取消选中该复选框，div 的display属性将设置为none并且该元素将被隐藏。

我们在示例中
使用了display属性，但是，您可能需要
根据您的用例使用visibility属性。

当元素的display属性设置为时none，该元素将从 DOM 中移除并且不会影响布局。呈现文档时就好像该元素不存在一样。

另一方面，当元素的visibility属性设置为hidden时，它仍会占用页面空间，但是该元素是不可见的（未绘制）。该元素仍会照常影响您页面上的布局。

如果使用可见性选中复选框，则显示元素

下面是一个示例，它使用该visibility属性在复选框被选中时显示一个元素。

索引.html
<!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>

这是相关的 JavaScript。

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

如果复选框选中可见性则显示元素

如果加载页面，您会看到该元素即使在隐藏时也会占用空间。

即使该元素是不可见的，它仍然会正常影响页面的布局。

如果我们将元素的display属性设置为none，它将从 DOM 中取出，下一个元素将在页面上占据它的位置。

使用该display属性显示或隐藏元素会移动页面上的内容，这可能会造成混淆，应尽可能避免。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：