Javascript Jquery-从多个输入字段中获取总计，而无需直接输入

我有几个字段，第一个是“Shipping_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>

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

$（文档）.on（'change'，'input[name^=“shipping_details[charge][]”），function（）{
var总和=0.00；
$（'input[name^=“Shipping_details[charge][]”]）。每个（函数（）{
sum+=+$（this.val（）；
});
$（'input[name^=“freightBillSubtotal”].val（sum.toFixed（2））；
});  

其中输入到FreightBill小计。然后我在页面上有一个单独的部分叫做“其他利率金额”。现在我有一个other_rate_total字段，当使用以下脚本更改“other_rate_amount”字段时，它的值会被打印出来：

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

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

$（文档）.on（'change'，'input[name^=“other_rate_amount”]”，function（）{
var总和=0.00；
$（'input[name^=“other_rate_amount”]”）。每个（函数（）{
sum+=+$（this.val（）；
});
$（'input[name^=“other_rate_total”]”）val（sum.toFixed（2））；
});  

但就我个人而言，我无法在每次“freightBillSubtotal”和“other_rate_total”因引用脚本而更改时更新一个名为“total”的完全独立的字段

更新

---

这是我的JSFIDLE的开始，老实说，我不知道如何让脚本在那里工作，我以前从未在那里制作过：-它应该具有我所指的所有方面。

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

        $(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" );
          });
    });

$（文档）.on（'change'，'input[name^=“other_rate_amount”]”，function（）{
var总和=0.00；
$（'input[name^=“other_rate_amount”]”）。每个（函数（）{
sum+=+$（this.val（）；
});
$（'input[name^=“other_rate_total”]”）val（sum.toFixed（2））；
calcTotal（）；
});  
$（文档）.on（'change'，'input[name^=“shipping_details[charge][]”），function（）{
var总和=0.00；
$（'input[name^=“Shipping_details[charge][]”]）。每个（函数（）{
sum+=+$（this.val（）；
});
$（'input[name^=“freightBillSubtotal”].val（sum.toFixed（2））；
calcTotal（）；
});  
函数calcTotal（）{
var otherRate=$（'input[name^=“other_rate_total”]”）。val（）；
var小计=$（“#freightBillSubtotal”）.val（）；
var total=parseFloat（其他利率）+parseFloat（小计）；
控制台日志（总计）；
$（'总计'）.val（总计）；
}
$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#运费\账单\项目”）.append（'请选择@foreach（$piecetypes作为$piecetype）{{{{$piecetype->label}}}@endforeachoption selected value=“”>请选择@foreach（$ratetypes作为$ratetype）{{{$ratetype->label}}@endforeach NoYesX'）；
});  
$（文档）.on（'click'，'.btn_remove'，function（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
$（'input[name^=“装运详细信息[费用][]”）。触发器（“更改”）；
});
});

您可以尝试使用

trigger

函数，如so

$（'input[name^=“total”]”）。trigger（'change'）

请提供一个可运行的请提供一个可运行的测试用例我已经用链接进行了更新，脚本在那里不起作用，只是因为我坚信这是我在JSFIDLE上格式化它们的方式（我以前从来没有做过一个，很抱歉，哈哈）。我想所有相关的细节都在那里，需要做的就是将脚本正确格式化，以便它在JSFIDLE中实际工作。非常感谢您的帮助！这非常有效！