javascript - Jquery - 在没有直接输入的情况下从多个输入字段中获取总数

Question

我有几个字段，第一个是“shipment_details[charge]”，这个字段可能有多个行。现在，我已经可以使用以下脚本获得大量此类费用的小计:

<script>
$(document).on('change', 'input[name^="shipment_details[charge][]"]', function() {
    var sum = 0.00;
    $('input[name^="shipment_details[charge][]"]').each(function(){
        sum += +$(this).val();  
    });
    $('input[name^="freightBillSubtotal"]').val(sum.toFixed(2));
});  
</script>

输入 freightBillSubtotal 的位置。然后我在页面上有一个单独的部分，称为“other_rate_amount”。现在我有一个 other_rate_total 字段，当使用以下脚本更改“other_rate_amount”字段时，它会打印它的值:

<script>
$(document).on('change', 'input[name^="other_rate_amount"]', function() {
    var sum = 0.00;
    $('input[name^="other_rate_amount"]').each(function(){
        sum += +$(this).val();  
    });
    $('input[name^="other_rate_total"]').val(sum.toFixed(2));
});  
</script>

但对于我来说，每次“freightBillSubtotal”和“other_rate_total”因其引用脚本而更改时，我无法在一个名为“total”的完全独立的字段中进行任何工作。

更新

这是我的 JSFiddle 的开始，老实说，我不确定如何让脚本在那里工作，我以前从未在那里做过:https://jsfiddle.net/uL5f7nxe/ - 它应该包含我所指的所有方面。

Answer 1

创建另一个函数来计算总计。每当运费或其他费率发生变化时，调用此函数来计算总计。我假设你想把这两个加起来。还添加了触发器以在您删除行时重新计算装运小计。希望这有帮助..

        $(document).on('change', 'input[name^="other_rate_amount"]', function() {
        var sum = 0.00;
        $('input[name^="other_rate_amount"]').each(function(){
            sum += +$(this).val();  
        });
        $('input[name^="other_rate_total"]').val(sum.toFixed(2));
        calcTotal();
    });  

    $(document).on('change', 'input[name^="shipment_details[charge][]"]', function() {
        var sum = 0.00;
        $('input[name^="shipment_details[charge][]"]').each(function(){
            sum += +$(this).val();  
        });
        $('input[name^="freightBillSubtotal"]').val(sum.toFixed(2));
        calcTotal();
    });  

    function calcTotal() {
        var otherRate = $('input[name^="other_rate_total"]').val();
        var subTotal = $('#freightBillSubtotal').val();
        var total = parseFloat(otherRate) + parseFloat(subTotal);
        console.log(total);
        $('#total').val(total);
    }

     $(document).ready(function(){  
          var i=1;  
          $('#add').click(function(){  
               i++;  
               $('#freight_bill_items').append('<tr id="row'+i+'"> <td style="width:8%;text-align:center;"><input type="text" name="shipment_details[piecesNumber][]" class="form-control name_list" id="piecesNumber" placeholder="No. Pieces"></td><td style="width:16%;text-align:center;"><select style="width:100%; display:inline" class="form-control" name="shipment_details[piecesType][]" id="pieces_type"><option selected value="">Please select</option>     @foreach($piecetypes as $piecetype)<option value="{{ $piecetype->id }}">{{ $piecetype->label }}</option>@endforeach</select></td><td><select style="width:100%; display:inline" class="form-control" name="shipment_details[rateType][]" id="rateType">option selected value="">Please select</option>     @foreach($ratetypes as $ratetype)<option value="{{ $ratetype->id }}">{{ $ratetype->label }}</option>@endforeach</select></td><td style="width:16.5%;text-align:center;"><input type="text" name="shipment_details[weight][]" id="weight" class="form-control name_list" placeholder="Weight"></td><td style="width:16.5%;text-align:center;"><select style="width:100%; display:inline" class="form-control" name="shipment_details[hazmat][]" id="hazmat">                    <option selected value="0">No</option><option value="1">Yes</option></select></td><td style="width:16.5%;text-align:center;"><input type="text" name="shipment_details[description][]" class="form-control name_list" placeholder="Description" id="description"></td><td style="width:16.5%;text-align:center;"><input type="text" name="shipment_details[charge][]" class="form-control name_list" placeholder="Charge" id="charge"></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
          });  
          $(document).on('click', '.btn_remove', function(){  
               var button_id = $(this).attr("id");   
               $('#row'+button_id+'').remove();  
               $( 'input[name^="shipment_details[charge][]"]' ).trigger( "change" );
          });
    });