如何仅用一个原生JS函数实现勾选复选框动态显示隐藏对应Div

实现思路 #

通过自定义属性data-target绑定复选框和对应要控制的Div，使用事件委托统一监听所有复选框的状态变化，仅需一次JS绑定即可支持任意数量的复选框-Div组合，无需重复编写逻辑代码。

具体实现 #

1. HTML代码规范 #

所有需要实现切换功能的复选框统一添加类名toggle-checkbox，并通过data-target属性指定对应Div的选择器，目标Div默认设置隐藏即可：

<!-- 示例组1 -->
<input type="checkbox" class="toggle-checkbox" data-target="#Div1"> 勾选显示Div1
<div id="Div1" style="display: none;">Div1的展示内容</div>

<!-- 示例组2 -->
<input type="checkbox" class="toggle-checkbox" data-target="#Div2"> 勾选显示Div2
<div id="Div2" style="display: none;">Div2的展示内容</div>

<!-- 可无限新增组合，无需修改JS代码 -->

2. JS代码（仅需编写一次） #

document.addEventListener('DOMContentLoaded', function() {
  // 全局监听change事件，通过事件委托匹配目标复选框
  document.addEventListener('change', function(e) {
    // 仅处理带toggle-checkbox类的复选框触发的事件
    if (!e.target.classList.contains('toggle-checkbox')) return;
    // 获取关联的目标Div
    const targetDiv = document.querySelector(e.target.dataset.target);
    if (!targetDiv) return;
    // 根据复选框状态切换Div显示隐藏
    targetDiv.style.display = e.target.checked ? 'block' : 'none';
  });
});

方案优势 #

• 无冗余代码，全量组合仅需一套逻辑
• 拓展性强，新增组合仅需调整HTML代码，无需修改JS
• 支持动态新增的复选框-Div组合，无需重新绑定事件

可选轻量实现 #

如果不想使用事件委托，也可以用通用函数手动绑定的方式：

1. 通用函数：

function toggleDivByCheckbox(checkbox) {
  const targetDiv = document.querySelector(checkbox.dataset.target);
  if (targetDiv) {
    targetDiv.style.display = checkbox.checked ? 'block' : 'none';
  }
}

2. HTML绑定：

<input type="checkbox" onchange="toggleDivByCheckbox(this)" data-target="#Div1"> 勾选显示Div1
<div id="Div1" style="display: none;">Div1的展示内容</div>

内容的提问来源于stack exchange，提问作者K. BRINE