Getting values from checkbox, add them, and display the result

Question

I'm having some checkboxes, where all have different values but all numbers.

I want to get the values that are checked, and then add the numbers together and then display the result in my div.

<div id="pakker">
<input type="checkbox" value="39" />test 1<br/>
<input type="checkbox" value="79" />test 2<br/>
<input type="checkbox" value="29" />test 3<br/>
<input type="checkbox" value="49" />test 4<br/>
ect
</div>

What I have so far is this: var pakker = $('#pakker checkbox:checked').val();

UPDATE: Where i want the result: <h1 id="sk">0</h1>

But it's not really working, although I'm not getting any errors.

Does anyone know how this can be done, as easily as possible?

You're using checkbox as a selector but there's no such tag name. I believe you're looking for :checkbox (that leading colon is important!), and then you're going to have to use something different than .val to handle the multiple objects returned. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Nov 9, 2011 at 10:00

James Allardice · Accepted Answer · 2011-11-09 09:55:45Z

5

You can select checkboxes using an attribute equals selector (you could also use the :checkbox selector, but that's slower). You would then need to iterate over the set of checked checkboxes and keep a running total of the values:

var total = 0;
$("#pakker input[type='checkbox']:checked").each(function() {
    total += parseInt(this.value, 10);
});
//Do whatever you like with total

Here's a working example.

answered Nov 9, 2011 at 9:55

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Patrick R Over a year ago

Thanks, did the job with adding ect.. but when i press "test 2" i cant see the result ?

James Allardice Over a year ago

I'm not entirely sure what you mean. If you want something to happen when you click on the checkbox, you'll have to bind a click or change event listener to the checkboxes.

Patrick R Over a year ago

Okay, so something like this ? $(function() { $('#pakker :checked').click(updateSK); updateSK(); -another new function });

Pavel Hodek · Accepted Answer · 2011-11-09 10:10:13Z

3

Here you can see what to do: http://jsfiddle.net/vaKWs/6/

Updated to sum values automatically.

edited Nov 9, 2011 at 10:10

answered Nov 9, 2011 at 10:03

Pavel Hodek

14.6k3 gold badges34 silver badges40 bronze badges

1 Comment

Patrick R Over a year ago

Thank you, but there should be no button, it needs to be shown automaticly

David Horák · Accepted Answer · 2011-11-09 09:57:27Z

0

var result = 0;
$("#pakker input:checked").each(function(){ result += $(this).val(); });

alert(result );

answered Nov 9, 2011 at 9:57

David Horák

5,56511 gold badges56 silver badges81 bronze badges

1 Comment

run Over a year ago

parse integer $("#pakker input:checked").each(function(){ result = parseInt($(this).val())+parseInt(result); });

alex · Accepted Answer · 2011-11-09 09:59:13Z

0

If you are fortunate enough to not support older browsers (or shim reduce())...

var sum = $('#pakker :checkbox:checked').map(function() {
   return parseInt(this.value, 10);
}).get().reduce(function(prev, current) {
    return prev + current;
}, 0);

jsFiddle.

answered Nov 9, 2011 at 9:59

alex

492k205 gold badges890 silver badges992 bronze badges

Comments

Yi Jiang · Accepted Answer · 2011-11-09 10:54:51Z

0

Sample code:

$(document).ready(function(){
        $("input[type='checkbox']").click(function(){
            var total = 0;
            $("#pakker input[type='checkbox']:checked").each(function() {
                total += parseInt(this.value, 10);
            });
            $('#result').html(total);
        });
    });

Result:

<span id="result"></span>
<div id="pakker">
<input type="checkbox" value="39" />test 1 - value 39<br/>
<input type="checkbox" value="79" />test 2 - value 79<br/>
<input type="checkbox" value="29" />test 3 - value 29<br/>
<input type="checkbox" value="49" />test 4 - value 49<br/>
ect
</div>

edited Nov 9, 2011 at 10:54

Yi Jiang

50.2k16 gold badges139 silver badges137 bronze badges

answered Nov 9, 2011 at 10:44

Idham Perdameian

2,27725 silver badges34 bronze badges

Collectives™ on Stack Overflow

Getting values from checkbox, add them, and display the result

5 Answers 5

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related