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 DEMO

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

fiddle

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

Answer 3

您可以选择以下复选框：

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

我还将你的和值用于第二次计算。为什么不 - 它使它更快，更可读。它有效。

在更改中总计已选中的复选框

并发症

3 个答案: