Question

我有3个不同ID的复选框：

<input type="checkbox" value="3.99" id="one" checked>
<input type="checkbox" value="5.99" id="two">
<input type="checkbox" value="7.99" id="three">

还有一个具有复选框总值的字段：

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

我需要最简单的jquery解决方案来随时计算值。例如，如果我检查id＆＃34;一个＆＃34;和＆＃34;两个＆＃34; div＆＃34; total＆＃34;应该是这样的：

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

Answer 1

你可以这样写一些东西：

$('input:checkbox').on('change', function () {

 if(this.checked)
    $('#total').text(parseFloat($('#total').text()) + parseFloat($(this).val()))

}).trigger("change")

FIDDLE EXAMPLE

修订版

这个更完美有效。

HTML：

<input type="checkbox" class="check" value="3.99" id="one" checked>
<input type="checkbox" class="check" value="5.99" id="two">
<input type="checkbox" class="check" value="7.99" id="three">
<div id="total">0</div>

JQUERY：

$('input:checkbox').on('change', function () {
    var sum = 0;


    $('.check').each(function () {

        if (this.checked) sum = sum + parseFloat($(this).val());

    });

    $('#total').text(sum)

}).trigger("change")

REVISED FIDDLE

Answer 2

使用：

var $cbs = $(':checkbox');
$cbs.change(function(){
var total = 0; //$("#more").val();
$cbs.each(function() {
    if ($(this).is(":checked"))
        total += parseFloat($(this).val());
});
alert(total);
});

<强> Working Demo

Answer 3

$("input[type=checkbox]").change(function(){
    updateTotal();
});

function updateTotal(){
    var total = 0;
    $("input[type=checkbox]:checked").each(function(){
        total += parseFloat($(this).val());
    });
    $("#total").html(total);
}

演示 http://jsfiddle.net/vnwL92b4/

试试吧

从多个复选框中获取值并计算它们

3 个答案:

修订版

HTML：