Checkbox关联Div显示控制问题：勾选其他选项时隐藏指定Div

安全阿岳

2026-7-16

解决方案

原生JavaScript实现

给所有功能复选框添加统一类名（比如toggle-div-checkbox），同时用data-target属性绑定对应要显示的div的ID：

<input type="checkbox" class="toggle-div-checkbox" data-target="markAsFullChange" id="markFull">Mark as full
<input type="checkbox" class="toggle-div-checkbox" data-target="otherOptionDiv" id="otherOption">Other option

<div id="markAsFullChange" style="display: none;">Mark as full对应的设置内容</div>
<div id="otherOptionDiv" style="display: none;">Other option对应的设置内容</div>

编写状态监听逻辑：

// 获取所有复选框元素
const checkboxes = document.querySelectorAll('.toggle-div-checkbox');

// 为每个复选框绑定change事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 第一步：隐藏所有关联的div
    checkboxes.forEach(cb => {
      const targetDiv = document.getElementById(cb.dataset.target);
      if (targetDiv) targetDiv.style.display = 'none';
    });
    
    // 第二步：如果当前复选框被勾选，显示其对应的div
    if (this.checked) {
      const targetDiv = document.getElementById(this.dataset.target);
      if (targetDiv) targetDiv.style.display = 'block';
    }
  });
});

jQuery实现（项目已引入jQuery时可用）

复选框和div的HTML结构和上面一致。
编写简化逻辑：

$('.toggle-div-checkbox').on('change', function() {
  // 隐藏所有目标div
  $('.toggle-div-checkbox').each(function() {
    $('#' + $(this).data('target')).hide();
  });
  
  // 若当前复选框处于勾选状态，显示对应div
  if ($(this).is(':checked')) {
    $('#' + $(this).data('target')).show();
  }
});