更改时从总数框中添加和删除数字

Question

我试图在选中和取消选中复选框时添加和删除价格。我正在使用事件侦听器功能，但无法正常运行。如何在未选中的情况下如何单击任一复选框添加到总数中并删除？

HTML：

window.addEventListener('load', function() {
  'use strict';

  const form = document.getElementById('orderForm');

  form.addEventListener("change", function() {

    var total = 0;
    const checkboxes = form.querySelectorAll('input[data-price][type=checkbox]');
    const checkboxCount = checkboxes.length;

    for (let i = 0; i < checkboxCount; i++) {

      const checkbox = checkboxes[i];

      if (checkbox.checked) {

        total += parseFloat(checkbox.dataset.price);

        form.total.value = total;

        var boxTotal = parseFloat(total);

        boxTotal = boxTotal.toFixed(2);

        form.total.value = boxTotal;

      } else {

        form.total.value -= this.value;
      }
    }

  });

});

<form id="orderForm">
  <section id="selectRecords">
    <div class="item">
      <span class="price">10.80</span>
      <span class="chosen"><input type="checkbox" data-price="9.80"></span>
    </div>
    <div class="item">
      <span class="price">15.70</span>
      <span class="chosen"><input type="checkbox" data-price="12.70"></span>
    </div>
    <div class="item">
      <span class="price">18.20</span>
      <span class="chosen"><input type="checkbox" data-price="8.20"></span>
    </div>
  </section>

  <section id="checkCost">
    Total <input type="text" name="total" size="10" readonly="">
  </section>

  </section>
</form>

Answer 1

由于您要汇总change上所有与复选框相关的价格，因此您不应该拥有} else { form.total.value -= this.value;-this不仅指form（没有.value），您也完全不用担心未经检查的价格，因为它们无论如何都不会影响change事件后的最终价值。

您只能使用:checked伪选择器选择查询字符串中的选中复选框-这样您就可以省去if (checkbox.checked)部分。

您还可以考虑得出总数一次，然后分配给input的值一次，而不是每次迭代：

const form = document.getElementById('orderForm');

form.addEventListener("change", function() {
  let total = 0;
  const checkboxes = form.querySelectorAll('input[data-price][type=checkbox]:checked');
  const checkboxCount = checkboxes.length;
  for (let i = 0; i < checkboxCount; i++) {
    const checkbox = checkboxes[i];
    total += Number(checkbox.dataset.price);
  }
  form.total.value = total.toFixed(2);
});

<form id="orderForm">
  <section id="selectRecords">
    <div class="item">
      <span class="price">10.80</span>
      <span class="chosen"><input type="checkbox" name="record[]" value="973" data-price="9.80"></span>
    </div>
    <div class="item">
      <span class="price">15.70</span>
      <span class="chosen"><input type="checkbox" name="record[]" value="974" data-price="12.70"></span>
    </div>
    <div class="item">
      <span class="price">18.20</span>
      <span class="chosen"><input type="checkbox" name="record[]" value="975" data-price="8.20"></span>
    </div>
  </section>

  <section id="checkCost">
    Total <input type="text" name="total" size="10" readonly="">
  </section>

  </section>
</form>

另外，为了更加实用，您可以使用Array.prototype.reduce来计算total，而不是for循环：

const form = document.getElementById('orderForm');

form.addEventListener("change", function() {
  const total = Array.prototype.reduce.call(
    form.querySelectorAll('input[data-price][type=checkbox]:checked'),
    (a, checkbox) => a + Number(checkbox.dataset.price),
    0
  );
  form.total.value = total.toFixed(2);
});

<form id="orderForm">
  <section id="selectRecords">
    <div class="item">
      <span class="price">10.80</span>
      <span class="chosen"><input type="checkbox" name="record[]" value="973" data-price="9.80"></span>
    </div>
    <div class="item">
      <span class="price">15.70</span>
      <span class="chosen"><input type="checkbox" name="record[]" value="974" data-price="12.70"></span>
    </div>
    <div class="item">
      <span class="price">18.20</span>
      <span class="chosen"><input type="checkbox" name="record[]" value="975" data-price="8.20"></span>
    </div>
  </section>

  <section id="checkCost">
    Total <input type="text" name="total" size="10" readonly="">
  </section>

  </section>
</form>