动态行总和不更新是因事件未委托到父容器，应绑定到tbody并用event.target.matches检测checkbox；sum为0需检查data-price值是否有效；大数据量时应维护checkedids set而非遍历dom。
勾选行后总和不更新？检查事件绑定是否在动态行上失效
表格行是后来用 JavaScript 动态插入的，但 onclick 或 addEventListener 只绑在了初始存在的 <tr> 上，新行没监听器，自然不会触发统计。解决办法不是给每行都单独绑定，而是用事件委托——把监听器挂到 <code><tbody> 或整个 <code><table> 上，然后判断点击目标是不是 checkbox。
<p>实操建议：</p>
<ul>
<li>用 <code>event.target.matches('input[type="checkbox"]') 精准识别 checkbox 点击，避免误判 td 或其他元素
document.querySelectorAll('tr') 遍历所有行再绑定，这在增删行后必须重绑，容易漏sum 值始终为 0？确认 checkbox 的 value 是否为有效数字
很多开发者直接取 checkbox.value，但 HTML 中 checkbox 默认 value 是 "on"，哪怕你写了 value="123"，也得确保没被 JS 覆盖或模板引擎转义。更常见的是：值来自后端 JSON，但字段名写错（比如用了 price 却读成 amount），或字段本身是字符串但含空格/货币符号（如 " ¥1,234.50"）。
实操建议：
- 在勾选回调里加一句
console.log(event.target.closest('tr').dataset.price)，看实际拿到的是什么 - 推荐统一用 data 属性存数值：
<tr data-price="123.5"><td><input type="checkbox"></td></tr>，读取时用parseFloat(row.dataset.price) || 0 - 避免用
innerText或textContent提取金额列内容——格式变动（如加单位、换行）就崩
多页表格或虚拟滚动下统计失真？避开全量遍历
当表格有上千行、只渲染可视区域时，document.querySelectorAll('input[type="checkbox"]:checked') 会漏掉未挂载的行，导致 sum 偏低；反过来，如果每次勾选都遍历全部数据源（哪怕没渲染），又可能因状态不同步而重复累加。
实操建议：
- 维护一个独立的选中 ID 映射表，比如
const checkedIds = new Set()，checkbox change 时增删 ID，统计时只查这个 Set 对应的数据项 - 数据源里每个条目带唯一
id字段，渲染时用data-id同步到 DOM，勾选事件中通过event.target.closest('tr').dataset.id获取 - 不要在渲染循环里反复调用
reduce()计算总和——把 sum 存为变量，每次勾选只做sum += value或sum -= value
IE 或旧版 Safari 下 onchange 不触发？优先用 click 事件
change 事件在部分旧浏览器中对 checkbox 有延迟（比如需失焦才触发），而用户点完就期待立刻看到结果。更麻烦的是，移动端双击缩放后，有时 click 也会失效，但概率低得多。
实操建议：
- 统一用
click事件监听 checkbox，它兼容性更好、响应更及时 - 加防抖不是必须的，但若表格行极多且频繁操作，可对 sum 更新加
requestAnimationFrame节流，避免连续 layout thrashing - 别依赖
event.target.checked判断状态——它反映的是点击「前」的状态；要用event.target.checked本身（现代浏览器已修正），或更稳妥地用event.target.checked === true
最易被忽略的点：checkbox 的 name 属性如果相同，提交表单时会以数组形式发送，但对 JS 统计毫无影响；真正影响逻辑的是它的 checked 状态和关联的数据来源是否稳定。只要数据映射不丢、事件不漏、数值解析不糊，实时统计就是确定性的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
