优化复选框触发的HTML条件显示：简化Vanilla JS代码方案咨询

核心思路是用**数据属性（data-*）**关联父复选框与对应的子选项，通过类选择器批量处理，彻底避免重复写函数。

1. 改造HTML结构（基于table） #

给每个父级复选框添加data-target属性，值对应子选项的类选择器；子选项统一加类并默认隐藏：

<table>
  <!-- 海报设计A -->
  <tr>
    <td>
      <input type="checkbox" class="parent-checkbox" data-target=".child-group-a"> 海报设计A
    </td>
    <td>
      <div class="child-options child-group-a" style="display: none;">
        <label><input type="checkbox"> 细节调整</label>
        <label><input type="checkbox"> 配色修改</label>
      </div>
    </td>
  </tr>
  <!-- 海报设计B -->
  <tr>
    <td>
      <input type="checkbox" class="parent-checkbox" data-target=".child-group-b"> 海报设计B
    </td>
    <td>
      <div class="child-options child-group-b" style="display: none;">
        <label><input type="checkbox"> 尺寸调整</label>
        <label><input type="checkbox"> 字体更换</label>
      </div>
    </td>
  </tr>
</table>

2. 通用原生JS逻辑 #

只需要一段代码，就能处理所有父复选框的状态切换，新增海报时无需修改JS：

// 获取所有父级复选框
const parentCheckboxes = document.querySelectorAll('.parent-checkbox');

// 定义通用的子选项切换函数
function toggleChildren(parentCheckbox) {
  const targetSelector = parentCheckbox.dataset.target;
  const childElements = document.querySelectorAll(targetSelector);
  
  childElements.forEach(element => {
    element.style.display = parentCheckbox.checked ? 'block' : 'none';
  });
}

// 绑定事件+初始化状态
parentCheckboxes.forEach(checkbox => {
  // 监听勾选状态变化
  checkbox.addEventListener('change', () => toggleChildren(checkbox));
  // 页面加载时，若复选框默认勾选，自动显示子选项
  if (checkbox.checked) toggleChildren(checkbox);
});

3. 可选jQuery简化版（若项目允许引入） #

如果后续确认站点用了jQuery，这段代码更简洁：

$('.parent-checkbox')
  // 绑定切换事件
  .on('change', function() {
    $($(this).data('target')).toggle(this.checked);
  })
  // 初始化默认勾选的状态
  .filter(':checked').trigger('change');

方案优势 #

• 彻底消除重复代码：新增海报只需修改HTML，无需添加新的JS函数
• 不依赖ID：用类和数据属性关联，避免ID冲突，结构更灵活
• 兼容性好：原生JS版本支持所有现代浏览器及IE11+
• 状态同步：初始化处理默认勾选场景，页面加载后状态正确

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