取消选中框JavaScript后的重置输入值？

Question

这是我的JS代码

let items = 0;

document.addEventListener("click", ({ target }) => {
  if (target.className === "food" && target.checked) {
    parseInt(items)
    items += target.value;
    console.log("I clicked the item", items);
  } else if (target.className === "food" && !target.checked) {
    parseInt(items)
    items -= target.value;
    console.log("i unclicked", items);
  })}

HTML输入，

 <input type="checkbox" name="item1" value="1000" class="food">
 <input type="checkbox" name="item2" value="2000" class="food">

当我单击一个复选框时，它将添加1000，然后当我取消选中该转换为2000时，然后再次检查它变为3000，并且基本上只是不断添加它们，无论我检查还是取消选中

如何 检查当我取消选中的输入时，我将重置价值？

更新：我添加了ParseInt，并在单击复选框时显示01000，但是当我取消选中为0时。但是，如果我单击1个复选框，那么另一个会像10002000一样添加它，而不是执行3000

Answer 1

或者没有parseint：

let items = 0;

document.addEventListener("click", ( {target} ) => {
  if (target.className === "food" && target.checked === true) {
    items += +target.value;
    console.log("I clicked the item", items);
  } else if (target.className === "food" && target.checked === false) {
    items -= +target.value;
    console.log("i unclicked", items);
  }});

Answer 2

我认为这就是您要寻找的。

let items = 0;

document.addEventListener("click", ({ target }) => {
  if (target.className === "food" && target.checked) {
    items += parseInt(target.value);
    console.log("I clicked the item", items);
  } else if (target.className === "food" && !target.checked) {
    items -= parseInt(target.value);
    console.log("i unclicked", items);
  }})

 <input type="checkbox" name="item1" value="1000" class="food">
 <input type="checkbox" name="item2" value="2000" class="food">