Get the values from multiple checkboxes and calculate them

Question

I have 3 checkboxes with different id's:

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

And also a field with total value of checked boxes:

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

I need simplest jquery solution to calculate values on the go. For example if I check id's "one" and "two" the div "total" should look like this:

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

I tried different solutions but the code was redundunt. To many if's. — Вячеслав Неговский, Sep 03 '14 at 09:41
Where would you use this, I mean this is sheer hardcoding and I dont recommend this... — Ch Faizan Mustansar, Sep 03 '14 at 09:47
@DanglingPointer he may be getting those values dynamically.. — PSR, Sep 03 '14 at 09:48
Ok fine, but there are too many questions asked already that how to bind an event and how you can get the value of a check box. — Ch Faizan Mustansar, Sep 03 '14 at 09:51
There are atleast 3-4 answers already... Вячеслав Неговский Please mark as correct... — Ch Faizan Mustansar, Sep 03 '14 at 09:53
possible duplicate of [How to retrieve checkboxes values in jQuery](http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery) — saimeunt, Sep 03 '14 at 14:33

Ehsan Sajjad · Answer 1 · 2014-09-03T09:55:02.103

2

you can write something in this way:

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

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

}).trigger("change")

FIDDLE EXAMPLE

REVISED:

This one is more perfect and effective.

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

edited Sep 03 '14 at 09:55

answered Sep 03 '14 at 09:41

Ehsan Sajjad

61,834
16
105
160

There's overflow if check/uncheck few times :( – Вячеслав Неговский Sep 03 '14 at 10:24
what you mean by that? – Ehsan Sajjad Sep 03 '14 at 10:26

score 1 · Answer 2 · answered Sep 03 '14 at 09:41

1

Use:

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

answered Sep 03 '14 at 09:41

Milind Anantwar

81,290
25
94
125

score 1 · Answer 3 · answered Sep 03 '14 at 09:42

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

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

Demo http://jsfiddle.net/vnwL92b4/

try it

Get the values from multiple checkboxes and calculate them

3 Answers3

REVISED:

HTML: