0

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?

Improve this question
1
  • 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. Commented Nov 9, 2011 at 10:00

5 Answers 5

Reset to default
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.

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

3 Comments

Thanks, did the job with adding ect.. but when i press "test 2" i cant see the result ?
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.
Okay, so something like this ? $(function() { $('#pakker :checked').click(updateSK); updateSK(); -another new function });
3

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

Updated to sum values automatically.

Improve this answer

1 Comment

Thank you, but there should be no button, it needs to be shown automaticly
0 
var result = 0;
$("#pakker input:checked").each(function(){ result += $(this).val(); });

alert(result );
Improve this answer

1 Comment

parse integer $("#pakker input:checked").each(function(){ result = parseInt($(this).val())+parseInt(result); });
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.

Improve this answer

Comments

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.