Jquery / javascript只有在同一行的复选框被选中时才会求和字段

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

本文关键字：复选框 字段 求和 一行 javascript Jquery      更新时间：2023-09-26

我有一个jquery/javascript函数，按我的顺序计算立方体的总数。

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

效果很好。我需要第二个函数来合计相同的字段，但只有当一个名为treating的复选框被选中。每行都有一个名为"已处理"的复选框，但由于表是动态生成的，每次都会在名称后面附加一个计数器，因此我使用name^="treated"

我在下面的东西，但这不起作用:

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));
}

一如既往地感谢您的帮助。

渲染的HTML输出[1动态行添加]:(仍在开发中，所以非常粗糙，请原谅)

<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>

首先去父tr，然后使用查找查找复选框在当前行，也使用检查与DOM对象不是jQuery对象，你可以使用索引器转换jQuery对象到DOM对象

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


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

checked是实际DOM元素的属性，您所拥有的是一个jQuery元素。你需要改变这个:

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

: 

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

或更多jquery:

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

您可以使用$("table.authors-list").find('checkbox[name^="treated"]:checked')遍历"checked"复选框，并使用最接近它的输入值(假设在同一行)。

假设您的表有许多行，每一行都有一个复选框和一个输入，您可以使用:

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));
}

试试这个:

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));

更改以下行

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


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