Question

我有一个jquery / javascript函数，它总计了我订单中的多维数据集的数量。这个工作100％，低于。

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

如上所述，上面的工作很棒。我需要第二个函数来计算相同的字段，但仅当选中名为treat的复选框时。每行都有一个名为treat的复选框，但由于表是动态生成的，因此每次都会在名称后附加一个计数器，因此我使用了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>

Answer 1

首先转到父tr，然后使用find查找当前行中的复选框，并使用带有DOM对象的check而不是jQuery对象，可以使用indexer将jQuery对象转换为DOM对象。

更改

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

要

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

Answer 2

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

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

对此：

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

或更多jQuery-ish：

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

Answer 3

更改以下行

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

到此

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

Answer 4

您可以使用$("table.authors-list").find('checkbox[name^="treated"]: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));
}

Answer 5

试试这个：

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

仅当选中同一行上的复选框时，才对jquery / javascript求和字段

5 个答案: