应利用dom层级关系定位行内复选框：从触发元素向上找tr，再向下查同级目标，主复选框设data-row="true"标识，从属复选框统一name="item[]"，通过closest("tr")和queryselectorall精准获取；三态需手动设置indeterminate属性，且checked必须为false才能生效。
表格中复选框如何绑定到整行数据
不能靠 id 绑定，因为每行重复用同一个 id 会破坏 HTML 唯一性规则，JavaScript 只能拿到第一个匹配元素。正确做法是利用 DOM 层级关系：从触发的复选框出发，向上找 tr，再向下找同级所有目标复选框。
常见错误现象：document.getElementById("cb") 总是只操作第一行；getElementsByName("cb") 返回全部但无法区分归属行。
- 给每行的主复选框加
data-row="true"标识，从属复选框统一用name="item[]" - 监听主复选框的
change事件，用this.closest("tr")定位当前行 - 再用
row.querySelectorAll('input[name="item[]"]')获取该行所有从属复选框
主复选框如何同步反映“全选/半选/未选”三态
浏览器原生 input[type="checkbox"] 不支持 indeterminate 状态（即“—”），必须手动设置 indeterminate 属性，且它不改变 checked 值——这是最容易被忽略的点。
如果只改 checked，UI 上永远只有勾或空，无法显示“部分选中”状态。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 先统计该行内从属复选框的
checked数量和总数 - 若全部为
true→checked = true; indeterminate = false - 若全部为
false→checked = false; indeterminate = false - 否则 →
checked = false; indeterminate = true（注意：此时checked必须设为false，否则indeterminate不生效）
从属复选框变化后如何反向更新主复选框
主复选框状态必须响应从属项的任意变更，否则三态会失准。不能只靠初始渲染，得建立双向监听链。
容易踩的坑：在主复选框事件里又去监听从属项，结果导致重复绑定、内存泄漏或事件嵌套触发。
- 所有从属复选框共用一个事件监听器，委托到
table或tbody更稳妥 - 事件回调里用
e.target.closest("tr")找到所属行，再定位该行主复选框 - 避免在循环中反复调用
querySelector，可提前缓存主复选框引用（如row.querySelector('[data-row="true"]')）
为什么不要用 jQuery 的 .prop("indeterminate", true)
jQuery 1.6+ 虽然支持 indeterminate，但它的 .prop() 方法在某些版本中对布尔属性处理不一致，尤其在动态创建的元素上容易失效；原生 element.indeterminate = true 更可靠。
另外，jQuery 的 .attr() 完全不适用——indeterminate 是 DOM 属性（property），不是 HTML 属性（attribute）。
- 始终用原生方式设置：
mainCb.indeterminate = true - 设置后立即触发 UI 更新，无需额外
dispatchEvent - 兼容性没问题：Chrome、Firefox、Safari、Edge 均支持（IE11 也支持，但需注意伪类
:indeterminate样式需单独定义）
indeterminate 的赋值时机稍有偏差，整行联动就会卡在“看起来像选了，其实没生效”的状态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
