使用 JavaScript 基于复选框选择显示和隐藏 div 标签 - HTML

在 Web 开发中，我们经常需要基于用户输入或事件来显示或隐藏某些 HTML 元素。在这篇文章中，我们将介绍如何使用 JavaScript 基于复选框选择显示和隐藏 div 标签。

HTML

首先，我们需要创建两个复选框和一个 div 标签。我们将用这两个复选框来控制 div 标签的显示和隐藏。

<input type="checkbox" id="checkbox1">
<label for="checkbox1">显示 div 1</label>

<input type="checkbox" id="checkbox2">
<label for="checkbox2">显示 div 2</label>

<div id="div1">这是 div 1</div>
<div id="div2">这是 div 2</div>

复选框和 div 标签的 ID 属性用于在 JavaScript 中引用它们。label 标签的 for 属性将复选框与标签关联在一起，这样用户就可以通过单击标签来选择复选框。

JavaScript

我们将使用以下 JavaScript 代码来显示和隐藏 div 标签。该代码使用 addEventListener() 函数为复选框添加事件监听器，并根据复选框是否被选中来显示或隐藏 div 标签。

const checkbox1 = document.getElementById('checkbox1');
const checkbox2 = document.getElementById('checkbox2');
const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');

checkbox1.addEventListener('change', function() {
  if (this.checked) {
    div1.style.display = 'block';
  } else {
    div1.style.display = 'none';
  }
});

checkbox2.addEventListener('change', function() {
  if (this.checked) {
    div2.style.display = 'block';
  } else {
    div2.style.display = 'none';
  }
});

以上代码中，我们首先使用 document.getElementById() 函数获取复选框和 div 标签的引用。然后，我们为每个复选框添加了一个 change 事件监听器。当复选框的状态更改时，该监听器将检查其 checked 属性并相应地显示或隐藏 div 标签。元素的 style.display 属性用于控制元素的显示方式。当该属性设置为 'none' 时，元素将被隐藏；而设置为 'block'，元素将被显示。

结论

我们已经介绍了如何使用 JavaScript 基于复选框选择显示和隐藏 div 标签。我们先创建了两个复选框和两个 div 标签，然后使用事件监听器在 JavaScript 中实现这个过程。这个代码片段可以通过将其复制粘贴到您的项目中来使用。