JavaScript购物车选中计算需用数据驱动视图，维护商品对象数组状态，通过change事件更新checked值并调用updateCartSummary统一计算已选数量与总价，同步处理全选/反选及indeterminate状态。
在 JavaScript 中实现购物车商品的选中计算，核心是监听用户勾选/取消勾选行为，动态更新“已选商品数量”和“已选商品总价”，并支持全选/取消全选。关键在于维护数据状态、绑定事件、实时计算，而不是直接操作 DOM 数值。
1. 结构设计：用数据驱动视图
每个商品项建议用对象表示，包含 id、name、price、count（数量）、checked（是否选中） 等字段。整个购物车用数组管理，例如：
const cartItems = [
{ id: 1, name: 'iPhone', price: 5999, count: 1, checked: true },
{ id: 2, name: 'AirPods', price: 1299, count: 2, checked: false },
{ id: 3, name: 'MacBook', price: 12999, count: 1, checked: true }
];
页面渲染时，为每个商品生成带 data-id 的复选框，并设置初始 checked 状态；价格和小计也根据 price × count × checked 渲染。
2. 单个商品选中/取消：更新状态并重新计算
给所有商品复选框绑定 change 事件，通过 dataset.id 找到对应商品，切换其 checked 值，再调用统一的计算函数：
立即学习“Java免费学习笔记（深入）”；
- 用
cartItems.find(item => item.id == e.target.dataset.id)定位商品 - 执行
item.checked = e.target.checked - 立即调用
updateCartSummary()更新总计信息
3. 全选/取消全选：批量同步 checked 状态
全选框（如 #selectAll）的 change 事件应把所有商品的 checked 设为相同值：
- 获取当前全选框状态：
const isChecked = e.target.checked - 遍历 cartItems，全部设为
item.checked = isChecked - 再调用
updateCartSummary() - 注意：要同步反向更新全选框的 indeterminate 状态（部分选中时显示破折号）——检查
checked.length === 0、checked.length === total、其余为 indeterminate
4. 计算逻辑封装：避免重复遍历
updateCartSummary() 函数应一次性遍历 cartItems，统计：
- 已选商品数：
cartItems.filter(i => i.checked).length - 已选总金额：
cartItems.reduce((sum, i) => i.checked ? sum + i.price * i.count : sum, 0) - 更新页面显示：修改
#selectedCount和#totalPrice元素的textContent - 同步刷新全选框的
indeterminate和checked属性
不复杂但容易忽略：每次更新后记得重新渲染小计列（如每行的“¥xxx”），否则界面和数据会不一致。保持数据源唯一、DOM 只负责展示，交互才稳定可控。
