javascript - 在更改时添加和删除总计框中的数字

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 事件后的最终值(value)。

您可以使用 :checked psuedo-selector 仅选择查询字符串中选中的复选框 - 这将让您省略 if (checkbox.checked) 部分.

您还可以考虑计算出总数一次，然后分配给输入的值一次，而不是一次每次迭代:

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 来计算总计，而不是使用 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>