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

我的页面上有几个复选框，每个复选框都有一个

数据价格

属性

数据价格

表示项目的价格

我试图根据选中的复选框计算一个

总值

，并确保从总值中扣除未选中复选框的值

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

我遇到的问题是，当我把价格加起来时，它工作得很好，但当我取消选中复选框时，总价值会跳到负数，并进行一些奇怪的计算

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

$（文档）。在（“单击”、“.checks”上，函数（）{
if（$（this）.prop（'checked'）==true）{
var价格=$（此）.attr（“数据价格”）；
var tots=$（'#tots'）.html（）；
var setPrice=数量（价格）+数量（总计）；
var ffp=数学轮（设定价格*100）/100；
$（#tots'）。文本（ffp）；
}else if（$（this）.prop（'checked'）==false）{
var价格=$（此）.attr（“数据价格”）；
var tots=$（'#tots'）.html（）；
var setPrice=数量（价格）-数量（总计）；
var ffp=数学轮（设定价格*100）/100；
$（#tots'）。文本（ffp）；
}
});

£0.00
17.94
17.94
17.94只需更改：

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

到

它应该很好用。当您试图从检查的要素价格中减去总价时，会出现此问题

只需更改：

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

到

它应该很好用。当您试图从检查的要素价格中减去总价时，会出现此问题

您正在从单击的数字中减去总数。第19行应改为

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

而不是

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

：）
您正在从单击的数字中减去总数。第19行应改为

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

而不是

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

：）
干燥-不要重复你自己

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

我提取了这个函数，这样我们可以在更改和加载时调用它，以防选中复选框


函数计算（）{
var-tots=0；
$（“.checks:checked”）.each（函数（）{
var价格=$（此）.attr（“数据价格”）；
tots+=浮动汇率（价格）；
});
$（#tots'）.text（tots.toFixed（2））；
}
$（函数（）{
美元（文件）.on（“更改”和“.checks”，计算）；
计算（）；
});

£0.00
17.94
17.94
17.94干燥-不要重复

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

我提取了这个函数，这样我们可以在更改和加载时调用它，以防选中复选框


函数计算（）{
var-tots=0；
$（“.checks:checked”）.each（函数（）{
var价格=$（此）.attr（“数据价格”）；
tots+=浮动汇率（价格）；
});
$（#tots'）.text（tots.toFixed（2））；
}
$（函数（）{
美元（文件）.on（“更改”和“.checks”，计算）；
计算（）；
});

£0.00
17.94
17.94
17.94更好的办法是每次从当前检查的元素中重新计算总和（而不是根据当前元素进行加减）

最好是针对
更改
事件，而不是
单击

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

更新的fiddle at
更好的方法是每次重新计算当前选中元素的总和（而不是根据当前元素进行加减）

最好是针对
更改
事件，而不是
单击

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

更新fiddle at
您必须将
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);
}
});

您必须将
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);
}
});

给你一个解决方案


var总计=0；
$（文档）。在（“单击”，“检查”，函数（）上）{
if（$（this）.prop（'checked'）==true）{
总数+=数量（$（本）。数据（“价格”）；
}else if（$（this）.prop（'checked'）==false）{
总数-=数量（$（本）。数据（“价格”）；
}
$（#tots'）.text（数学四舍五入（总计*100）/100）；
});

£0.00
17.94
17.94
17.94
给你一个解决方案


var总计=0；
$（文档）。在（“单击”，“检查”，函数（）上）{
if（$（this）.prop（'checked'）==true）{
总数+=数量（$（本）。数据（“价格”）；
}else if（$（this）.prop（'checked'）==false）{
总数-=数量（$（本）。数据（“价格”）；
}
$（#tots'）.text（数学四舍五入（总计*100）/100）；
});

£0.00
17.94
17.94
17.94
老实说，我会用一种与你不同的方式来处理它。单击
.checks
时。依我看，它似乎更容易阅读

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

老实说，我会用一种与你不同的方式来处理它。单击
.checks
时。依我看，它似乎更容易阅读

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

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

它简化了您的代码：


$（'.checks'）。在（'change'，function（）上{
var合计=0；
$（'.checks:checked'）。每个（函数（）{
总计+=$（此）.data（'price'）；
});
$（#tots'）.text（total.toFixed（2））；
});

£0.00
17.94
17.94
17.94使用
：checked
选择器循环检查的项目，而不是查看（未）检查的项目

它简化了您的代码：


$（'.checks'）。在（'change'，function（）上{
var合计=0；
$（'.checks:checked'）。每个（函数（）{
总计+=$（此）.data（'price'）；
});
$（#tots'）.text（total.toFixed（2））；
});

£0.00
17.94
17.94
17.94
var setPrice=0；
$（文档）。在（“单击”，“检查”，函数（）上）{
if（$（this）.prop（'checked'））=