jquery / javascript to sum field only if checkbox on same row is checked

Question

I have a jquery / javascript function that totals the number of cubes in my order. this works 100% and is below.

function calculateTotalVolume() {
    var grandTotalCubes = 0;
    $("table.authors-list").find('input[name^="cubicvolume"]').each(function () {
        grandTotalCubes += +$(this).val();
    });
    $("#grandtotalcubes").text(grandTotalCubes.toFixed(2));
}

as mentioned the above works great. I need a second function to total the same field but only if an checkbox named treated is checked. each row has the checkbox named treated but as the table is dynamically generated, a counter is appended to the name each time hence my use of name^="treated"

I am after something like below but this doesn't work:

function calculateTotalTreatedVolume() {
    var grandTotaltreatedCubes = 0;
    $("table.authors-list").find('input[name^="cubicvolume"]').each(function () {
        if($("table.authors-list").find('checkbox[name^="treated"]').checked){
            alert('10');
            grandTotaltreatedCubes += +$(this).val();
    }

    });
    $("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
}

help appreciated as always.

UPDATE

Rendered HTML output [1 dynamic row added]: (Still in development so very rough, please excuse it)

<table class="authors-list" border=1>
  <thead>
    <tr>
      <td></td><td>Product</td><td>Price/Cube</td><td>Qty</td><td>line total cost</td><td>Discount</td><td>Cubes per bundle</td><td>pcs per bundle</td><td>cubic vol</td><td>Bundles</td><td><input type="checkbox" class="checkall"> Treated</td>
    </tr>
  </thead>
  <tbody>
    <tr>
     <td><a class="deleteRow"> <img src="http://devryan.tekwani.co.za/application/assets/images/delete2.png" /></a></td>
     <td><input type="text" id="product" name="product" />
     <input type="hidden" id="price" name="price" readonly="readonly"/></td>
     <td><input type="text" id="adjustedprice" name="adjustedprice" /></td>
     <td><input type="text" id="qty" name="qty" /></td>
     <td><input type="text" id="linetotal" name="linetotal" readonly="readonly"/></td>
     <td><input type="text" id="discount" name="discount" /></td>
     <td>
        <input type="text" id="cubesperbundle" name="cubesperbundle" >
    </td>
    <td>
        <input type="text" id="pcsperbundle" name="pcsperbundle" >
    </td>
    <td>
        <input type="text" id="cubicvolume" name="cubicvolume"  size='5' disabled>
    </td>
     <td><input type="text" id="totalbundles" name="totalbundles" size='5' disabled ></td>
    <td valign="top" ><input type="checkbox" id="treated" name="treated" ></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <td colspan="15"><input type="button" id="addrow" value="Add Product" /></td>
    </tr>
    <tr>
        <td colspan="3">Grand Total: R<span id="grandtotal"></span></td>
        <td colspan="2">Ave Discount: <span id="avediscount"></span>%</td>
        <td colspan="1">Total Cubes: <span id="grandtotalcubes"></span></td>
        <td colspan="15">Treated Cubes: <span id="grandtotaltreatedcubes"></span></td>
    </tr>

    <tr>
        <td colspan="15"><textarea  rows="1" cols="50" placeholder="Specific Comments"></textarea><textarea  rows="1" cols="20" placeholder="Customer Reference"></textarea>
</td>
    </tr>
  </tfoot>
</table>

Its amazing how all the answerers (including me) didn't spot the invalid checkbox selector inside the .find() !! — techfoobar
– techfoobar, Commented Apr 5, 2013 at 10:29

Adil · Accepted Answer · 2013-04-05 10:02:31Z

2

First go the parent tr and then using find to find the checkbox in current row and also use checked with DOM object not jQuery object, you can use indexer to convert jQuery object to DOM object.

Change

if($("table.authors-list").find('checkbox[name^="treated"]').checked){

To

if($(this).closest('tr').find('checkbox[name^="treated"]')[0].checked){

answered Apr 5, 2013 at 10:02

Adil

148k25 gold badges217 silver badges207 bronze badges

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

1 Comment

Smudger Over a year ago

Thanks Adil,I understand what you are trying to do but outputting an error now. TypeError: $(...).closest(...).find(...)[0] is undefined and ...$("table.authors-list").closest('tr').find('checkbox[name^="treated"]')[0].check...

elclanrs · Accepted Answer · 2013-04-05 10:02:38Z

2

checked is a property of the actual DOM element, and what you have is a jQuery element. You need to change this:

$("table.authors-list").find('checkbox[name^="treated"]').checked

To this:

$("table.authors-list").find('checkbox[name^="treated"]')[0].checked
                                                         -^- // get DOM element

Or more jQuery-ish:

$("table.authors-list").find('checkbox[name^="treated"]').is(':checked')

answered Apr 5, 2013 at 10:02

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

1 Comment

Smudger Over a year ago

Thanks elclanrs, gave it a go without luck. error on the [0]?

techfoobar · Accepted Answer · 2013-04-05 10:27:42Z

1

You can iterate through the "checked" checkboxes using $("table.authors-list").find('checkbox[name^="treated"]:checked') and use the value of the input nearest to it (assumed to be in the same row).

Assuming your table has many rows each having a checkbox and an input, you can use:

function calculateTotalTreatedVolume() {
    var grandTotaltreatedCubes = 0;

    // iterate through the "checked" checkboxes
    $("table.authors-list").find('input[type="checkbox"][name^="treated"]:checked').each(function () {

        // use the value of the input in the same row
        grandTotaltreatedCubes += +$(this).closest('tr').find('input[name^="cubicvolume"]').val();

    });
    $("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
}

edited Apr 5, 2013 at 10:27

answered Apr 5, 2013 at 10:05

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

6 Comments

Smudger Over a year ago

Thanks techfoobar, tried your suggestion but it is not populating the grandtotaltreatedcubes span so not sure if 100% right?

techfoobar Over a year ago

Can your post your html structure too?

Smudger Over a year ago

Thanks, I have added this to the question.

techfoobar Over a year ago

Edited the answer. The selector for checkbox is not checkbox but rather input[type="checkbox"]

techfoobar Over a year ago

That would be find('input[type="checkbox"][name^="treated"]').not(':checked')

|

palaѕн · Accepted Answer · 2013-04-05 10:26:00Z

1

Try this:

var grandTotaltreatedCubes = 0;

// Cache the table object here for faster processing of your code..
var $table = $("table.authors-list");

$table.find('input[name^="cubicvolume"]').each(function () {

    // Check if checkbox is checked or not here using is(':checked')
    if ($table.find('checkbox[name^="treated"]').is(':checked')) {
        grandTotaltreatedCubes += $(this).val();
    }
});

$("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));

edited Apr 5, 2013 at 10:26

answered Apr 5, 2013 at 10:12

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

2 Comments

Smudger Over a year ago

Thanks Will, getting error: $table.find('checkbox[name^="treated"]').is(':checked') {

Smudger Over a year ago

Thanks Will, gave it a go but not working. no errors or output. The if statement is not catching anything?

Mark Walters · Accepted Answer · 2013-04-05 10:33:08Z

1

Change the following line

if($("table.authors-list").find('input[name^="treated"]').checked){

To this

if($("table.authors-list").find('input[name^="treated"]').is(':checked')){

edited Apr 5, 2013 at 10:33

answered Apr 5, 2013 at 10:03

Mark Walters

12.4k6 gold badges36 silver badges48 bronze badges

1 Comment

Smudger Over a year ago

Thanks Mark, made the change but not the alert not being triggered so not catching the event?

Collectives™ on Stack Overflow

jquery / javascript to sum field only if checkbox on same row is checked

5 Answers 5

1 Comment

1 Comment

6 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

6 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related