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

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>

如果所有复选框都被选中，我想获得它们的总数。到目前为止它只给出一个值。如果不勾选则需要扣除价格。

Answer 1

这个已经修复了您在标记中犯的所有错误，并大大简化了代码。

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>