javascript - 如何使用 jQuery 根据选中的复选框计算数字(总计)？

Question

我的页面上有几个复选框，每个复选框都有一个 data-price 属性。

data-price 表示商品的价格。

我正在尝试根据选中的复选框计算总值(value)，并确保从总值(value)中扣除未选中复选框的值。

到目前为止我已经做到了:

https://jsfiddle.net/523q4n72/1/

我遇到的问题是，当我将价格相加时，它工作正常，但是当我取消选中复选框时，总值(value)会跳到负值，并且会进行一些奇怪的计算。

要测试它，只需选中复选框并取消选中其中一两个即可查看问题。

$(document).on("click", ".checks", function() {
  if ($(this).prop('checked') == true) {
    var price = $(this).attr("data-price");
    var tots = $('#tots').html();
    var setPrice = Number(price) + Number(tots);
    var ffp = Math.round(setPrice * 100) / 100;
    $('#tots').text(ffp);
  } else if ($(this).prop('checked') == false) {
    var price = $(this).attr("data-price");
    var tots = $('#tots').html();
    var setPrice = Number(price) - Number(tots);
    var ffp = Math.round(setPrice * 100) / 100;
    $('#tots').text(ffp);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>£<span id="tots">0.00</span></h4>
<input type="checkbox" name="something" class="checks" data-price="17.94">17.94
<input type="checkbox" name="something" class="checks" data-price="17.94">17.94
<input type="checkbox" name="something" class="checks" data-price="17.94">17.94

Answer 1

DRY - 不要重复自己。

在本例中循环每个选中的复选框。

我已经提取了该函数，因此我们可以在更改时调用它，并且在加载时调用它，以防复选框已被选中

function calc() {
  var tots = 0;
  $(".checks:checked").each(function() {
    var price = $(this).attr("data-price");
    tots += parseFloat(price);
  });
  $('#tots').text(tots.toFixed(2));
}
$(function() {
  $(document).on("change", ".checks", calc);
  calc();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>£<span id="tots">0.00</span></h4>
<input type="checkbox" name="something" class="checks" data-price="17.94">17.94
<input type="checkbox" checked name="something" class="checks" data-price="17.94">17.94
<input type="checkbox" name="something" class="checks" data-price="17.94">17.94

调用和初始化的替代方式

$(".checks").on("change", calc).change();