let addonCheckboxes = document.querySelectorAll(".custom-checkbox") let priceSection = document.getElementById("priceSection") let customProductPricing = document.getElementById("customProductPricing") for (let i = 0; i < addonCheckboxes.length; i++) { addonCheckboxes[i].addEventListener("change", function() { if (addonCheckboxes[i].checked != false) { priceSection.textContent = parseInt(customProductPricing) + parseInt(addonCheckboxes[i].getAttribute("price")); } else { priceSection.textContent = parseInt(customProductPricing) } }) } <input class="custom-checkbox" type="checkbox" price="150"></input> <input class="custom-checkbox" type="checkbox" price="150"></input> <input class="custom-checkbox" type="checkbox" price="150"></input> <div id="priceSection"> </id> <div id="customProductPricing">"150"</div>Quiero obtener el total de todas las casillas de verificación si todas están marcadas. Hasta ahora solo da un valor. Y necesita deducir los precios si la casilla de verificación no está marcada.
Este solucionó todos los errores que cometió en su marcado y simplificó mucho el código.
const output = document.getElementById('priceSection'); const totalPrice = () => [...document.querySelectorAll('#prices input[type=checkbox]:checked')] .reduce((acc, { dataset: { price } }) => acc + +price, 0); document.getElementById('prices').addEventListener('change', () => output.textContent = totalPrice()); <div id="prices"> <input type="checkbox" data-price="10" /> <input type="checkbox" data-price="20" /> <input type="checkbox" data-price="30" /> </div> <div id="priceSection"></div>Está sobrescribiendo en lugar de sumar. Cuando está iterando a través de una serie de casillas de verificación y encuentra que más de una está marcada, su función falla. En primer lugar, debe contar la suma de las casillas de verificación marcadas y luego enviarla a priceSection , y cuando su suma sea igual a cero, debe configurarla parseInt(customProductPricing) como lo hizo en otra cosa.
Como ha mencionado @Sercan... Tampoco estoy seguro sobre el tema de la suma baja, pero he preparado algo para ti.
Con suerte, te llevará a lo que quieres lograr.
let addonCheckboxes = document.querySelectorAll(".custom-checkbox") let priceSection = document.getElementById("priceSection") let customProductPricing = document.getElementById("customProductPricing"); var checkboxes = document.getElementsByClassName("custom-checkbox"); function sum(){ var total = 0; for(let x = 0; x < checkboxes.length; x++){ let price = document.getElementsByClassName(x); if(price[0].checked){ total = total + Number(price[0].dataset.price); } } console.log('Sum = ' + total) } <input class="custom-checkbox 0" onclick="sum()" type="checkbox" data-price="150"></input> <input class="custom-checkbox 1" onclick="sum()" type="checkbox" data-price="150"></input> <input class="custom-checkbox 2" onclick="sum()" type="checkbox" data-price="150"></input> <div id="priceSection"></id> <div id="customProductPricing">"150"</div>