Aquí está mi código 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); })}Entrada HTML
<input type="checkbox" name="item1" value="1000" class="food"> <input type="checkbox" name="item2" value="2000" class="food">En este momento, cuando hago clic en una casilla de verificación, agregará 1000, luego, cuando la desmarco, pasa a 2000, luego vuelvo a verificar, se convierte en 3000, y básicamente sigue agregándolos independientemente de si los marco o los desmarco.
¿Cómo restablezco el valor cuando desmarco mi entrada?
Actualización: agregué parseInt y muestra 01000 cuando hago clic en mi casilla de verificación, pero cuando desmarco se convierte en 0. Sin embargo, si hago clic en 1 casilla de verificación, luego otra la agregará como 10002000 en lugar de hacer 3000
Creo que esto es lo que estás buscando.
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">Alternativamente sin el 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); }});