javascript - 通过选中复选框计算总价

Question

我制作了一个脚本，根据选中的复选框获取一个数字，然后有一个输入，用户可以在其中输入一个数字，然后用我从复选框获得的总数来计算该数字。所以我的问题是，当我再次取消选中/选中复选框时，总数不会更新，我需要它自动更新。

// Total Price Calculator
function calc() {
  var tots = 0;
  $(".checks:checked").each(function() {
    var price = $(this).attr("data-price");
    tots += parseFloat(price);
  });

  $("#no-text").keyup(function() {
    var value = parseFloat($(this).val());
    $('#tots').text(value*tots.toFixed(2));
  });

}
$(function() {
  $(document).on("change", ".checks", calc);
  calc();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checks" data-price="10">
<input type="checkbox" class="checks" data-price="10">
<input type="checkbox" class="checks" data-price="10">

<input type="number" id="no-text" placeholder="10">

<span id="tots">0.00</span>

所以我需要所有这些自动完成，如果我选中第一个和第二个复选框并将输入设置为数字 5，它将计算价格，然后如果我取消选中一个复选框，它应该根据已输入的数字自动更新价格无需再次更新。

谢谢!

Answer 1

您可以在一个事件处理程序中包含多个元素，因此请包含 #no-text，以便在更新复选框或输入时它们都会触发 calc 事件

然后将 $('#tots').text((number * tots).toFixed(2)) 从旧的事件监听器中移出，并添加另一个变量来获取输入元素

// Total Price Calculator
function calc() {
  // Get value from input
  let number = parseFloat($('#no-text').val() || 0);
  let tots = 0;
  
  // Add Checkbox values
  $(".checks:checked").each(function() {
    tots += $(this).data("price");
  });
  
  // Update with new Number
  $('#tots').text((number * tots).toFixed(2));
}

$(function() {
  $(document).on('change', '.checks, #no-text', calc);
  calc();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checks" data-price="10">
<input type="checkbox" class="checks" data-price="10">
<input type="checkbox" class="checks" data-price="10">

<input type="number" class="duration-input" id="no-text" placeholder="10">

<span id="tots">0.00</span>