Jquery + Add Up Checkbox Values

Question

I have a page with a number of checkboxes. Each Checkbox is for a different item (virtual Rose) and rose has a different value. I have put the value of the rose into the value="" of the checkbox. I need to add up the total value of the ticked checkboxes - eg: 100, 230 etc. The only other factor is I need to only add up checkboxes with the class "giftsRosesCheckBox".

<table id="tableGiftsWhiteRose"><tr>
  <td colspan="2">White Rose</td></tr><tr>
  <td><input type="checkbox" class="giftsRosesCheckBox" value="100"/></td>
  <td class="credits">100 credits</td> 
</tr></table>

<table  id="tableGiftsRedRose"><tr>
  <td colspan="2">Red Rose</td></tr><tr>
  <td><input type="checkbox" class="giftsRosesCheckBox" value="130"/></td>
  <td class="credits">130 credits</td>      
</tr></table>

<table><tr>
  <td colspan="2">Stunning Red Rose</td></tr><tr>
  <td><input type="checkbox" class="giftsRosesCheckBox" value="150"/></td>
  <td class="credits">150 credits</td>      
</tr></table>

I'm really not sure how to do this so a push in the right direction would be great.

thanks so much.

alex · Accepted Answer · 2011-12-05 08:32:51Z

4

You could loop over the checkboxes and add their values.

var total = 0;
$(':checkbox:checked.giftsRosesCheckBox').each(function() {
    total += +this.value;
});

jsFiddle.

If you didn't have to support older browsers (or shim reduce()), you could do it in a more functional way...

var total = $(':checkbox:checked.giftsRosesCheckBox')
            .get()
            .reduce(function(total, checkbox) {
                 return total + +checkbox.value;
             }, 0);

jsFiddle.

edited Dec 5, 2011 at 8:32

answered Dec 5, 2011 at 8:27

alex

492k205 gold badges890 silver badges991 bronze badges

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

Comments

dafi · Accepted Answer · 2011-12-05 08:34:56Z

3

$(".giftsRosesCheckBox").click(function() {
    var total = 0;
    $(".giftsRosesCheckBox:checked").each(function() {
        total += parseInt($(this).val(), 10);
    });
    alert(total);
});

answered Dec 5, 2011 at 8:34

dafi

3,5522 gold badges31 silver badges52 bronze badges

Comments

Babu · Accepted Answer · 2011-12-05 08:31:36Z

0

var total =0;
$('input[type=checkbox].giftsRosesCheckBox, input[checked=checked].giftsRosesCheckBox').each(function(){
total += this.val();
});

answered Dec 5, 2011 at 8:31

Babu

1272 silver badges9 bronze badges

Collectives™ on Stack Overflow

Jquery + Add Up Checkbox Values

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related