如何获取选中项目的所有复选框值的总和

Question

 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>

I want to get the total of all the checkboxes if they are all checked. So far it gives only one value. And need to deduct the prices if the checkbox is unchecked.

Answer 1

You are overwriting instead of summing. When you are iterating thorough array of checkboxes and you find that more than one is checked your function fails. You should firstly count sum of checked checkboxes and then send it to priceSection, and when your sum is equal to zero you should set it parseInt(customProductPricing) like you did in else.

Answer 2

 let addonCheckboxes = document.querySelectorAll(".custom-checkbox") let priceSection = document.getElementById("priceSection") let customProductPricing = document.getElementById("customProductPricing") /* Reads the static defined value inside the <div> element. */ let total = parseInt(customProductPricing.textContent); /* Called when the onchange event is triggered on <input> elements. */ function changeEventHandler(value){ for(let i = 0; i < addonCheckboxes.length; ++i) { if(addonCheckboxes[i].checked == true) { total += parseInt(addonCheckboxes[i].value); } } console.log(total); return total; }

 <input class="custom-checkbox" type="checkbox" value="10" onchange="changeEventHandler(this.value)"/> <label>10</label> <input class="custom-checkbox" type="checkbox" value="20" onchange="changeEventHandler(this.value)"/> <label>20<label> <input class="custom-checkbox" type="checkbox" value="30" onchange="changeEventHandler(this.value)"/> <label>30<label> <div id="priceSection"></div> <div id="customProductPricing">40</div>

Answer 3

As @Sercan has mentioned... I am also not sure about the issue of loweing the sum but I've whipped up something for you.

Hopefully it'll lead you to what you want to achieve.

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

Answer 4

This one has fixed all the errors you made in your markup, and simplified the code by alot.

 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>

Answer 5

Using data set you can access price

 let addonCheckboxes = document.querySelectorAll(".custom-checkbox") let priceSection = document.getElementById("priceSection") let customProductPricing = document.getElementById("customProductPricing") let sum = 0 for (let i = 0; i < addonCheckboxes.length; i++) { addonCheckboxes[i].addEventListener("change", function(e) { console.log(e.target.dataset.price) if (addonCheckboxes[i].checked.= false) { sum = sum +Number(e.target.dataset.price) } else { sum = sum -Number(e.target.dataset.price) } customProductPricing.innerHTML = sum }) }

 <input class="custom-checkbox" type="checkbox" data-price="150"></input> <input class="custom-checkbox" type="checkbox" data-price="150"></input> <input class="custom-checkbox" type="checkbox" data-price="150"></input> <div id="priceSection"> </id> <div id="customProductPricing">"150"</div>