商城购物车多选与总价实时计算需监听复选框和数量输入变化，通过data-price/data-quantity绑定数据，遍历选中项累加price×quantity，支持全选同步、防抖优化及选中数量显示。
商城购物车的商品多选与总价实时计算，核心在于监听用户勾选状态变化，并动态汇总选中商品的价格与数量。关键不是一次性渲染完就不管，而是让数据和视图保持联动——选中/取消一个商品，总价立刻更新；全选/取消全选，所有复选框同步响应。
用 data 属性绑定商品价格和数量
每个购物车商品行（<tr> 或 <code><div class="cart-item">）需携带可读取的业务数据。推荐用 <code>data-price 和 data-quantity 存储单价和当前数量，避免从 DOM 文本中解析（易出错、难维护）。
<input type="checkbox" class="item-check" data-id="101"><span class="price" data-price="299.00">¥299.00</span><input type="number" class="qty-input" value="2" data-quantity="2">
监听复选框变化并触发重新计算
给所有商品复选框统一绑定 change 事件（委托到父容器更高效），每次触发时遍历所有已勾选项，累加 price × quantity。注意：要主动读取当前 qty-input 的值，而不是只依赖初始 data-quantity。
- 用
document.querySelectorAll('.item-check:checked')获取当前选中项 - 对每个选中项，取其最近的
.qty-input元素，用parseInt(input.value) || 1获取有效数量 - 用
parseFloat(priceEl.dataset.price)读取单价，避免字符串拼接错误 - 结果保留两位小数：
total.toFixed(2)
实现全选/取消全选逻辑
顶部“全选”复选框的状态应与所有商品项同步。监听它的 change 事件，批量设置其他复选框的 checked 属性，并再次调用总价计算函数。
- 全选勾上 → 所有
.item-check设为checked = true - 全选取消 → 所有
.item-check设为checked = false - 任一商品项变动后，检查是否全部勾选：若勾选项数等于总项数，则全选框也勾上；否则取消勾选
优化体验：防抖 + 显示选中数量
频繁操作（如快速点多个复选框）不必每次都重算，可用简单防抖（延迟 50ms 执行）提升响应流畅度。同时在页面显眼处显示“已选 X 件，合计 ¥XXX.XX”，增强反馈感。
- 用
let calcTimer记录定时器 ID，每次 change 先清除再新建 - 更新
.selected-count和.total-price两个元素的textContent - 总价为 0 时，可设为
¥0.00；无商品选中时，“结算”按钮置灰
不复杂但容易忽略的是数量变更也要触发重新计算——很多只监听 checkbox，忘了 input 的 change 或 keyup。把数量修改和勾选视为同等重要的数据变更源，统一走同一套计算逻辑，就能保证总价始终准确。
