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

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  type="checkbox" price="150"></input>
<input  type="checkbox" price="150"></input>
<input  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.

CodePudding user response：

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.

CodePudding user response：

When the onchange() event of the <input> elements is triggered, the changeEventHandler() method is called and the values on the page are collected and printed. I don't understand the issue of lowering the price if checkbox is not selected. Modify the else block to remove unselected values using the following approach.

let addonCheckboxes = document.querySelectorAll(".custom-checkbox")
let priceSection = document.getElementById("priceSection")
let customProductPricing = document.getElementById("customProductPricing")

/* Called when the onchange event is triggered on <input> elements. */
function changeEventHandler(value){ 
  let total = 0;
  total  = parseInt(customProductPricing.textContent);
  
  for(let i = 0 ; i < addonCheckboxes.length ;   i)
  {
    if(addonCheckboxes[i].checked == true)
    {
      total  = parseInt(addonCheckboxes[i].value);
    }
    else
    {
      total = "not all checkboxes are selected.";
      break;
    }
  }
  
  console.log(total);
  
  priceSection.innerHTML = "Result: "   total;
  return total;
}

<input  type="checkbox" value="10" onchange="changeEventHandler(this.value)"/>
<label>10</label>

<input  type="checkbox" value="20" onchange="changeEventHandler(this.value)"/>
<label>20<label>

<input  type="checkbox" value="30" onchange="changeEventHandler(this.value)"/>
<label>30<label>

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

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

CodePudding user response：

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  onclick="sum()" type="checkbox" data-price="150"></input>
<input  onclick="sum()" type="checkbox" data-price="150"></input>
<input  onclick="sum()" type="checkbox" data-price="150"></input>

<div id="priceSection"></id>

<div id="customProductPricing">"150"</div>

CodePudding user response：

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>