父子复选框绑定需用change事件+data属性区分层级：父变更同步子项，子变更动态更新父的checked/indeterminate；indeterminate须JS赋值并配合checked=false，DOM挂载后延迟设置；表格用扁平tr+data-role组织，缓存父子映射，维护顶层状态表支持分页和动态加载。
复选框父子关系怎么绑定才不会错乱
父子级联的核心是明确谁控制谁：父行勾选时，所有子行自动同步；子行单独操作时，父行状态要根据子行实际勾选数动态更新。关键不是监听 click，而是用 change 事件 + 显式判断子节点状态。
常见错误是直接给所有 <input type="checkbox"> 绑定同一 handler，导致父/子逻辑混杂、状态覆盖。必须区分层级标识——建议用 data-level="parent" 和 data-parent-id="row-123" 显式标记。
- 父复选框的
change事件只负责批量设置对应子项的checked属性和indeterminate - 子复选框的
change事件里，先找其data-parent-id对应的父节点，再统计同 parent-id 的所有子项勾选数 - 当子项全选时设父为
checked=true；全不选时设checked=false；部分选中时设indeterminate=true（注意：仅视觉，checked仍为false）
indeterminate 状态为什么总不显示
indeterminate 是纯 UI 状态，不能通过 HTML 属性设置，必须用 JS 赋值：checkbox.indeterminate = true。且一旦用户手动点击该 checkbox，浏览器会重置 indeterminate 为 false，所以每次子项变动后都得重新设置。
另一个坑是：父 checkbox 若没有显式设置 checked，哪怕 indeterminate=true，在某些旧版 Safari 中也不渲染破折号。
立即学习“前端免费学习笔记（深入）”；
- 务必在设置
indeterminate后，紧接着设置checkbox.checked = false（即使你只想显示破折号） - 避免在 DOM 渲染前就操作
indeterminate—— 确保元素已挂载，可用requestAnimationFrame或setTimeout(..., 0)延迟执行 - 不要依赖 CSS 的
:indeterminate伪类做逻辑判断，它不可编程读取
表格结构怎么组织才能方便 JS 定位
别用嵌套 <table> 或靠缩进识别层级。标准做法是扁平化行结构，用 data- 属性表达归属关系：
<tr data-role="parent" data-id="group-1"> <td><input type="checkbox" class="parent-checkbox"></td> <td>订单组 A</td> </tr> <tr data-role="child" data-parent-id="group-1"> <td><input type="checkbox" class="child-checkbox"></td> <td>订单 #1001</td> </tr>
- 所有
tr都在同一<tbody>下，避免跨<thead>/<tfoot>导致 querySelector 失效 - 避免用 class 名做逻辑分组（如
class="child"），改用data-role—— 更语义、不易被样式覆盖干扰 - 父行和子行之间不要插入空行或分隔符
<tr><td colspan="100%"></td></tr>，否则会影响nextElementSibling遍历逻辑
全选按钮和局部刷新如何兼容
全选按钮本质是“对所有父项触发一次 change”，但要注意：如果表格支持分页或虚拟滚动，document.querySelectorAll('.parent-checkbox') 可能只拿到当前页的节点，导致状态不同步。
更稳妥的做法是维护一个顶层状态映射表，比如 const selectionState = { 'group-1': 'partial', 'group-2': 'all' }，所有勾选操作都更新这个对象，再由它驱动 UI 渲染。
- 全选按钮点击时，遍历所有父项 ID，统一设为
all，然后调用渲染函数批量更新对应 checkbox - 局部刷新（如某组数据重载）时，先保留原
selectionState中该组的值，再重新生成 DOM，最后按状态恢复勾选 - 不要在每次 change 里反复调用
querySelectorAll查子项 —— 缓存好父子映射关系，例如初始化时构建const childrenMap = { 'group-1': [elem1, elem2] }
最易被忽略的是：子项数量动态变化（比如异步加载子行）后，父项的 indeterminate 状态不会自动更新，必须在新子项 append 完成后，主动触发一次父项状态重算。
