JavaScript如何处理checkbox事件 实现勾选加价取消减价

现有逻辑没有区分复选框的选中/取消选中状态，只要点击复选框就无条件累加value，因此无论勾选还是取消都会做加法，总价会持续上涨无法得到正确结果。

在匹配到复选框后，先判断它的checked状态：选中时累加对应value，取消选中时减去对应value即可，修改后代码如下：

let items = 0;

document.addEventListener("click", (e) => {
  if (e.target.matches("input[type=checkbox]")) {
    // 根据选中状态判断是加还是减
    e.target.checked 
      ? items += +e.target.value 
      : items -= +e.target.value;
    console.log(items);

    document.getElementById("price").textContent = `Food Total: $${(
      items / 100
    ).toFixed(2)}`;
  }
});

如果后续存在默认勾选项、动态新增/删除复选框的场景，手动维护全局items变量很容易因为漏算出现数值偏差，更推荐每次触发时直接遍历所有当前选中的复选框重新计算总价，不需要额外维护全局变量，容错性更高：

document.addEventListener("click", (e) => {
  if (e.target.matches("input[type=checkbox]")) {
    // 实时统计所有选中复选框的value总和
    const total = Array.from(
      document.querySelectorAll('input[type=checkbox]:checked')
    ).reduce((sum, item) => sum + Number(item.value), 0);

    document.getElementById("price").textContent = `Food Total: $${(total / 100).toFixed(2)}`;
  }
});

注意：如果你的复选框初始状态就有选中项，第一种方案需要在页面加载时先计算一次初始选中项的总价赋值给items，否则初始值0会和实际选中状态不符，第二种方案则没有这个问题。

内容的提问来源于stack exchange，提问作者makerbaker