HTML多复选框联动实现：按选中状态控制内容显示逻辑

嘿，这个需求用HTML搭配基础JavaScript就能完美实现~ 核心逻辑是监听复选框的状态变化，根据两个复选框的组合选中情况，动态控制对应内容的显示与隐藏。我给你准备了完整的可运行示例，注释也写得很明白：

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>复选框联动示例</title>
  <style>
    .checkbox-group {
      margin: 1rem 0;
    }

    .content-item {
      padding: 1rem;
      border: 1px solid #eee;
      border-radius: 4px;
      margin-top: 0.5rem;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
  <!-- 复选框控制区 -->
  <div class="checkbox-group">
    <label>
      <input type="checkbox" id="checkbox1"> 复选框1
    </label>
    <label style="margin-left: 1rem;">
      <input type="checkbox" id="checkbox2"> 复选框2
    </label>
  </div>

  <!-- 内容展示区 -->
  <div class="content-area">
    <div id="major1" class="content-item" style="display: none;">major1 - 状态：true</div>
    <div id="major2" class="content-item" style="display: none;">major2 - 状态：true</div>
    <div id="major3" class="content-item" style="display: none;">major3 - 状态：false</div>
  </div>

  <script>
    // 获取DOM元素
    const checkbox1 = document.getElementById('checkbox1');
    const checkbox2 = document.getElementById('checkbox2');
    const major1 = document.getElementById('major1');
    const major2 = document.getElementById('major2');
    const major3 = document.getElementById('major3');

    // 定义状态更新函数
    function updateDisplayContent() {
      const isCheckbox1Checked = checkbox1.checked;
      const isCheckbox2Checked = checkbox2.checked;

      // 先隐藏所有内容，避免多个内容同时显示
      [major1, major2, major3].forEach(item => {
        item.style.display = 'none';
      });

      // 根据复选框组合状态显示对应内容
      if (isCheckbox1Checked && !isCheckbox2Checked) {
        major1.style.display = 'block';
      } else if (!isCheckbox1Checked && isCheckbox2Checked) {
        major2.style.display = 'block';
      } else if (isCheckbox1Checked && isCheckbox2Checked) {
        major3.style.display = 'block';
      }
      // 若两个复选框都未勾选，所有内容保持隐藏，可根据需求调整此逻辑
    }

    // 给复选框绑定状态变化事件
    checkbox1.addEventListener('change', updateDisplayContent);
    checkbox2.addEventListener('change', updateDisplayContent);
  </script>
</body>
</html>

代码说明 #

• HTML结构：分为复选框控制区和内容展示区，三个内容项初始都设为display: none隐藏状态。
• JavaScript逻辑：
  1. 获取所有需要操作的DOM元素；
  2. 定义updateDisplayContent函数，先统一隐藏所有内容，再根据两个复选框的选中组合，显示对应的内容项；
  3. 给两个复选框绑定change事件，每次复选框状态变化时触发更新函数。
• CSS美化：简单设置了间距和边框样式，让页面看起来更整洁，你可以根据自己的需求修改样式。

如果你的“状态为true/false”是指需要操作元素的自定义属性（比如data-status），也可以在updateDisplayContent函数里添加对应逻辑，比如读取或修改属性值~

内容的提问来源于stack exchange，提问作者TitleTH