如何使用jQuery根据选中的复选框计算数字（总数）？

Question

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

data-price代表商品的价格。

我尝试根据选中的复选框计算total value，并确保从总值中扣除UN-CHECKED复选框的值。

到目前为止，我已经这样做了：

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

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

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

＆＃13;

＆＃13;

$(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);
  }
});

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

Answer 1

干 - 不要重复自己。

在这种情况下，循环每个复选框。

我已经解压缩了这个函数，所以我们可以在点击时调用它，并在加载时调用已经选中的复选框

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("click", ".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

Answer 2

只需改变：

var setPrice = Number(price) - Number(tots);

到

var setPrice = Number(tots) - Number(price);

它应该可以正常工作。当您尝试从已检查的元素价格中减去总价格时，问题就出现了。

UPDATED FIDDLE

Answer 3

更好的想法是每次从当前检查的元素重新计算总和（而不是根据当前元素添加或减去）

最好定位change事件而不是click。

$(document).on("change", ".checks", function() {
    var checked = $('.checks:checked'),
        sum = checked.get().reduce(function(prev, item) {
            return prev + parseFloat(item.getAttribute('data-price'));
        }, 0);

    $('#tots').text( sum.toFixed(2) );
});

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

更新了小提琴

Answer 4

您从所点击的数字中减去总数。第19行应该读

var setPrice = Number(tots) - Number(price);

而不是

var setPrice = Number(price) - Number(tots);

：）

Answer 5

您必须将Number(price) - Number(tots)更改为Number(tots) - Number(price)以获得正确的等式。

你每次都重新宣布一切，为什么不在条件之外宣布？

var price = 0;
var tots = "";
var setPrice = 0;
var ffp = 0;

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

Answer 6

您可以使用解决方案https://jsfiddle.net/523q4n72/5/

＆＃13;

＆＃13;

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

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

希望这会对你有所帮助。

Answer 7

老实说，我会以不同的方式接近它。点击.checks后iterate over each checkbox and add the values of those checked (updated fiddle)。看起来更容易阅读，imo。

$( document ).on( "click", ".checks", function() {

  //reset totals on each click
  var total = 0;

  //Add checked totals
  $('.checks').each(function(){
    if($(this).prop('checked') == true) total += $(this).data('price');
  });

  //Update new total
  $('#tots').html(total.toFixed(2));
});

Answer 8

不是查看（未）选中的项目，而是循环使用:checked选择器检查的项目。

它简化了您的代码：

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

<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 9

var setPrice = 0;

$( 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(tots) - Number(price);
	 
	 
    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