取消选中框 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

我想这就是您要找的。

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">

Answer 2

或者没有 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);
  }});

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

Reset Input Value After Unchecking Box Javascript?

javascript

events

addeventlistener