父子节点全选联动的核心是监听父节点勾选状态同步子节点，并通过递归遍历与状态聚合实现子节点变更时反向更新父节点的全选、半选或取消状态。
父子节点全选联动的核心是监听父节点的勾选状态，自动同步子节点；同时监听所有子节点状态，反向更新父节点（包括半选状态）。关键在于递归遍历和状态聚合逻辑。
一、HTML 结构：用 data-id 和 data-parent-id 标识层级关系
树形结构建议用嵌套的 ul/li 实现，每个选项用 input type="checkbox"，通过自定义属性明确父子归属：
<ul class="survey-tree">
<li data-id="1">
<label><input type="checkbox" value="1"> 产品功能</label>
<ul>
<li data-id="11" data-parent-id="1">
<label><input type="checkbox" value="11"> 登录流程</label>
</li>
<li data-id="12" data-parent-id="1">
<label><input type="checkbox" value="12"> 支付体验</label>
</li>
</ul>
</li>
<li data-id="2">
<label><input type="checkbox" value="2"> 客服服务</label>
<ul>
<li data-id="21" data-parent-id="2">
<label><input type="checkbox" value="21"> 响应速度</label>
</li>
</ul>
</li>
</ul>
二、JavaScript：实现双向联动逻辑
不依赖框架，纯 JS 即可完成。重点处理两件事：父 → 子（全选/取消），子 → 父（回溯更新）。
- 父节点变化时：获取其所有后代 checkbox（递归查找 li[data-parent-id="X"] 及其子树），统一设为相同 checked 状态，并触发它们的 change 事件以触发回溯
-
子节点变化时：向上查找父节点（通过 closest('[data-id]') 获取最近带 data-id 的祖先），再获取该父节点的所有直接子节点（li[data-parent-id="父ID"]），统计已勾选数：
- 全部勾选 → 父 checkbox 设为 checked
- 全部未勾选 → 父 checkbox 设为 unchecked
- 部分勾选 → 父 checkbox 设为 indeterminate（注意：仅视觉，不改变 checked 值）
- 避免重复触发：在程序设置 checkbox.checked 时，暂时解绑 change 事件，设完再绑定；或加标记位跳过非用户触发的变更
三、补充细节：支持半选图标与数据收集
浏览器原生支持 indeterminate 状态（只读属性），需手动设置：
立即学习“前端免费学习笔记（深入）”；
parentInput.indeterminate = (someChecked && !allChecked);
提交时，只需收集所有 input[type="checkbox"]:checked 的 value 即可，无需关心是否为父节点——因为父子是语义包含关系，实际业务中通常以叶子节点（最末级选项）为准，父节点仅作操作入口。
四、可选增强：折叠/展开 + 持久化状态
若树较深，可给父 li 添加 data-collapsible 属性，点击 label 时切换子 ul 的 display；状态可存入 localStorage，页面刷新后恢复勾选（注意同步 indeterminate 状态需额外记录）。
