点击复选框切换多个div的显示状态（无jQuery实现）

嘿，我懂你现在的烦恼——单个复选框控制div显示隐藏没问题，但多组一起搞就失灵了对吧？其实核心就是给每个复选框和对应的div建立明确的关联关系，用原生JS就能轻松搞定，我给你整理了一套清晰的实现方案：

核心思路 #

• 给每个复选框添加自定义data-target属性，值对应要控制的div的ID
• 给所有复选框绑定change事件，触发时根据勾选状态切换对应div的显示/隐藏
• 页面加载时初始化div的显示状态，和复选框默认勾选保持一致

完整代码示例 #

HTML部分 #

<div class="checkbox-group">
  <label>
    <input type="checkbox" id="chk1" data-target="content1" checked>
    显示/隐藏内容1
  </label>
  <div id="content1" class="target-content">这是和复选框1对应的内容区域</div>
</div>

<div class="checkbox-group">
  <label>
    <input type="checkbox" id="chk2" data-target="content2">
    显示/隐藏内容2
  </label>
  <div id="content2" class="target-content" style="display: none;">这是和复选框2对应的内容区域</div>
</div>

<div class="checkbox-group">
  <label>
    <input type="checkbox" id="chk3" data-target="content3" checked>
    显示/隐藏内容3
  </label>
  <div id="content3" class="target-content">这是和复选框3对应的内容区域</div>
</div>

CSS（可选，优化样式） #

.checkbox-group {
  margin: 15px 0;
}
.target-content {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #eee;
  border-radius: 4px;
}

JS部分 #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有需要控制的复选框
  const checkboxes = document.querySelectorAll('input[type="checkbox"][data-target]');
  
  // 定义状态切换函数
  function toggleContent(checkbox) {
    // 获取对应div的ID
    const targetId = checkbox.getAttribute('data-target');
    const targetDiv = document.getElementById(targetId);
    
    if (targetDiv) {
      // 根据复选框勾选状态切换显示/隐藏
      targetDiv.style.display = checkbox.checked ? 'block' : 'none';
    }
  }
  
  // 给每个复选框绑定change事件
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      toggleContent(this);
    });
    
    // 页面初始化时执行一次，确保状态正确
    toggleContent(checkbox);
  });
});

关键细节说明 #

• data-target属性：这是核心关联点，让JS能精准找到每个复选框对应的div，比硬编码ID灵活太多，后续新增复选框和div只需要匹配这个属性值就行
• DOMContentLoaded事件：确保DOM加载完成后再执行JS，避免找不到元素的问题
• 初始化触发：页面加载时调用一次toggleContent，保证div的初始状态和复选框的默认勾选状态一致，不会出现复选框勾选了但div没显示的情况

这样实现的话，不管你加多少组复选框和div，都能正常工作，完全不需要jQuery~

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