jquery calculate html values next to checked checkboxes

Question

My head is not thinking right today. Could any of you help? =) Only checked int values in second column need to be calculated and alerted in sum.

<table width="100%">
  <tr><td>Product Name</td><td>Price $</td></tr>
  <tr><td><input type="checkbox"> Product 1</td><td>200</td></tr>
  <tr><td><input type="checkbox"> Product 2</td><td>300</td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $('input').change(function() {
    var sum = 0;
    $("input:checked").each(function(){
      sum += parseInt($("input:checked").closest('td').next().html());
    });
    alert(sum);
  });
</script>

Thanks.

Michael Berkowski · Accepted Answer · 2011-12-20 03:36:41Z

4

Looks like you should be using $(this) inside the .each() to find the closest <td> to the currently selected checkbox in the loop.

  // Bind to all checkboxes...
  $('input[type="checkbox"]').change(function() {
    var sum = 0;
    $("input:checked").each(function(){
      // Use $(this) here
      sum += parseInt($(this).closest('td').next().html(), 10);
      // Always use the optional radix to parseInt() -----^^^^^
    });
    alert(sum);
  });

answered Dec 20, 2011 at 3:36

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

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

2 Comments

scorpio1441 Over a year ago

Thanks a lot! I should drink less wine while programming.

scorpio1441 Over a year ago

Yeah, I guess it's better none or more.

Andrew Whitaker · Accepted Answer · 2011-12-20 03:47:42Z

3

Try this:

$('input:checkbox').change(function() {
    var sum = 0;
    $("input:checked").each(function() {
        sum += parseInt($(this).closest('td').next().text(), 10);
    });
    alert(sum);
});

You need to listen for the change event on all checkboxes, not only those :checked. Also, be sure to pass the radix parameter to parseInt. Finally, this will refer to the item being evaluated in the each function.

Example: http://jsfiddle.net/38AeT/

edited Dec 20, 2011 at 3:47

answered Dec 20, 2011 at 3:38

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Collectives™ on Stack Overflow

jquery calculate html values next to checked checkboxes

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related