How get the sum of all the checkbox values of checked items

user_17473927 0
Viewed 371

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.

javascript
5 Answers

You are overwriting instead of summing. When you are iterating through an array of checkboxes and you find that more than one is checked your function fails. You should firstly count the 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.

user_93066810

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>

user_37443040

When the change event of the <input> elements is triggered, the update() method is called and the values in the page are collected and printed on the page. I don't understand the issue of lowering the price if the checkbox is not selected. Update the update() method to subtract unselected values from the total using the following approach; Add an else statement to the if block.

(function() {
  let addonCheckboxes = document.querySelectorAll(".custom-checkbox");
  
  function update()
  {
    let total = parseInt(document.getElementById("customProductPricing").textContent);
    
    for(let i = 0 ; i < addonCheckboxes.length ; ++i)
      if(addonCheckboxes[i].checked == true)
        total += parseInt(addonCheckboxes[i].value);
        
    document.getElementById("priceSection").innerHTML = "Result: " + total;
  }

  for(let i = 0 ; i < addonCheckboxes.length ; ++i)
    addonCheckboxes[i].addEventListener("change", update);
})();
<input class="custom-checkbox" type="checkbox" value="10"/>
<label>10</label>

<input class="custom-checkbox" type="checkbox" value="20"/>
<label>20<label>

<input class="custom-checkbox" type="checkbox" value="30"/>
<label>30<label>

<!-- Static Value -->
<div id="customProductPricing">40</div>

<br><div id="priceSection" style="color: red;">Result: </div>

user_150326880

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

user_85007180

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>

user_70519990
Related