jquery / javascript to sum field only if checkbox on same row is checked -
i have jquery / javascript function totals number of cubes in order. works 100% , 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 above works great. need second function total same field if checkbox named treated checked. each row has checkbox named treated table dynamically generated, counter appended name each time hence use of name^="treated"
i after below 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 always.
update
rendered html output [1 dynamic row added]: (still in development 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>
you can iterate through "checked" checkboxes using $("table.authors-list").find('checkbox[name^="treated"]:checked')
, use value of input nearest (assumed in same row).
assuming table has many rows each having checkbox , input, can use:
function calculatetotaltreatedvolume() { var grandtotaltreatedcubes = 0; // iterate through "checked" checkboxes $("table.authors-list").find('input[type="checkbox"][name^="treated"]:checked').each(function () { // use value of input in same row grandtotaltreatedcubes += +$(this).closest('tr').find('input[name^="cubicvolume"]').val(); }); $("#grandtotaltreatedcubes").text(grandtotaltreatedcubes.tofixed(2)); }
Comments
Post a Comment