javascript - 在更改中总计选中的复选框

Question

我有一个包含许多复选框的页面，每个复选框都与具有价格的产品相关联。我正在尝试使用 jQuery 来实时读取 1）产品数量和 2）用户选择的总价格。

这应该很容易：我会做类似的事情：

$(input).change( function(){
    var sum = $(input:checked).length
    var price_total = $(input:checked).length * 1.99
})

并发症

被更改的元素不计入上述代码。似乎当单击一个空白复选框来选中它时，jQuery 会认为当前元素“未选中”而不是“选中”，即它反映了更改之前的复选框。结果，我的代码在接受更改的项目时变得更加复杂。

有没有一种优雅而简单的方法来解决这个问题？

Answer 1

不确定您发布的代码是否是您实际运行的代码，但除其他外，您的代码在$选择器中缺少引号。但是，这对我有用：

$(':checkbox').change( function(){
    var sum = $(':checked').length;
    var price_total = sum*1.99;
})​​

jsFiddle 演示

Answer 2

没有你的html，我只能猜测它。我的解决方案是使用像 data-price 这样的数据实体。

HTML

​<input type="checkbox" data-price="1.99" />
<input type="checkbox" data-price="1.95" />
<input type="checkbox" data-price="3.60" />
<input type="checkbox" data-price="2.10" />

<div id="total"></div>

​jQuery

​$('input').change(function() {
    recalcTotal();
});

function recalcTotal() {
var total = 0;
$('input:checked').each(function() {
    total += $(this).data('price'); 
});

 $('#total').html(total);
}
​

小提琴

注意：我假设不同产品之间的价格可能会有所不同，不确定这是否正确

Answer 3

您可以选择这样的复选框：

$(input).change( function(){
    var sum = $('input[type=checkbox]:checked').length
    var price_total = sum * 1.99
})

我还使用你的 sum 值进行第二次计算。为什么不呢 - 它使它更快、更易读。它有效。