CODEWITHSUNDEEP
javascript
Ilham Mohomed
Ilham Mohomed

Reputation: 57

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

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.

Upvotes: 2

Views: 1706

Answers (5)

Relcode
Relcode

Reputation: 521

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>

Upvotes: 0

Butter
Butter

Reputation: 23

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.

Upvotes: 1

Stefan Avramovic
Stefan Avramovic

Reputation: 1353

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>

Upvotes: -1

Sercan
Sercan

Reputation: 5081

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>

Upvotes: 0

connexo
connexo

Reputation: 56744

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>

Upvotes: 2

Related Questions