Using jquery to get the sum of numbers if checkbox is checked

Question

I have a table. Each row has a checkbox and a number in it. The number is within a span with a class.

If the checkbox is checked, I want the number to be added up with all of the other numbers in checked rows. Here is what the row looks like.

 <td><input class="box" type="checkbox" name="selclips[]" value="1234"></td><td><span class="amount">45.00</span></td>
 <td><input class="box" type="checkbox" name="selclips[]" value="1235"></td><td><span class="amount">65.00</span></td>

Then at the bottom I have:

 <td>Total</td><td><div id="total"></div></td>

So, need some help with the JS or jquery to add up those dollar amounts with the span tags and provide a total if the checkbox is checked in that row? So, in the example above, if both boxes were checked, the script would add up 45.00 and 65.00 and put the total of 110 into the Total div. Also, if I un-check the boxes, the amount should change as well.

Thanks very much for any help anyone can give. I really appreciate it!

do you realy want to use js? because those scripts could be manipulated... and its really easy to make it on server side — YAMM
– YAMM, Commented Dec 22, 2013 at 7:19

Adil · Accepted Answer · 2013-12-22 08:29:52Z

2

You need something like

Live Demo

$('.box').change(function(){
   var total = 0;
   $('.box:checked').each(function(){
        total+=parseFloat($(this).parent().next('td').find('.amount').text());
   });
   $('#total').text(total);
});

edited Dec 22, 2013 at 8:29

answered Dec 22, 2013 at 7:20

Adil

148k25 gold badges217 silver badges207 bronze badges

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

3 Comments

Rahul Over a year ago

Parsing every now and then will increase the script run time and is memory hog.. Which I would not recommend. Instead try my solution.

CRAIG Over a year ago

Hi! Thanks very much for the comments. The issue here is that you are adding up the value of the checkboxes, when I need to add up the Amount within the span. So in the case above, the total should be 110 (45+65). I edited the question to clarify this.

CRAIG Over a year ago

Adil. Thanks very much for your help on this. Almost there. I didn't realize it was relevant, but apparently it is. In my actual code, there are <td>s in between the checkbox and the amount field, so finding the 'next' td isn't going to work. I updated the JSFiddle to reflect this if you wouldn't mind checking it out. Very much appreciate your help.

Rahul · Accepted Answer · 2013-12-22 08:01:34Z

1

Fairly simple..

$(function(){

    $( ".box" ).on( "click", function(){
        console.log($(this).next().html());
        var total = 0;
        $('.box:checked').each(function(){
         total += parseFloat($(this).next().html());
        });
        $("#total").text('Total is : ' + total);
    });

});

This works..

http://jsfiddle.net/hqR2r/2/

edited Dec 22, 2013 at 8:01

answered Dec 22, 2013 at 7:21

Rahul

5,7728 gold badges39 silver badges68 bronze badges

Comments

Ringo · Accepted Answer · 2013-12-22 13:09:59Z

1

Try this:

 var total = 0;
$('.box').click(function(){
    if($(this).prop('checked')){
      total += Number($(this).closest('tr').children('td:last-child').text());
  }
    else{
      total -= Number($(this).closest('tr').children('td:last-child').text());
    }
  $('#total').text(total);
});

Here is JSFIDDLE

edited Dec 22, 2013 at 13:09

answered Dec 22, 2013 at 7:23

Ringo

3,9873 gold badges25 silver badges38 bronze badges

2 Comments

CRAIG Over a year ago

Hi, thanks for the answer! I don't think I was quite clear enough on the question. I edited it for clarity. Thanks!

Ringo Over a year ago

Sorry! I have something to do. So now I come back. I have just updated my answer. Please try it! Thanks.

plalx · Accepted Answer · 2013-12-22 08:05:18Z

0

This perhaps?

var total = 0,
    $totalEl = $('.total');

$('.box:checkbox').click(function () {
    total += (this.checked? 1 : -1) * +this.parent('td').next().children('.amount').text();
    $totalEl.text(total);
});

answered Dec 22, 2013 at 8:05

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Comments

Ginden · Accepted Answer · 2013-12-22 13:22:29Z

0

var total =  Array.prototype.slice.call($('input.box:checkbox:checked'), 0) // changes jQuery object to array of DOM elements
    .reduce(function(a, b) { // calls reduce method
        return a + Number(b.value);
    }, 0);

Simple and fast.

reduce method documentation.

answered Dec 22, 2013 at 13:22

Ginden

5,31537 silver badges73 bronze badges

Collectives™ on Stack Overflow

Using jquery to get the sum of numbers if checkbox is checked

5 Answers 5

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related