如何在Javascript中计算多个动态输入字段的总和？

我试图通过javascript计算多个动态输入字段的总和

这是我的主要意见：

<input type="text" name="price[]" id="price" value="" class="form-control" />

它只计算一个输入，而不是添加的输入。现在，我想计算使用上述函数创建后显示的每个输入值的价格之和

预期结果：

input1 = 30
input2 = 30
...... = ...
subtotal = ...

因此，小计变量应该用每个输入的总和填充。 多谢各位

更新 现在，我如何计算每行的总和以及小计。在函数下面，您可以找到预期结果图像链接

我的完整javascript函数：

$(document).on('keyup keydown change', ".price, .months, #mwst, #rabatt",function () {
            var months = document.getElementById('months').value;
            var mwst = document.getElementById('mwst').value;
            var rabatt = document.getElementById('rabatt').value;
           
             var priceSum = 0;
             var monthsSum = 0;
                $('.price').each(function(){
                    priceSum += parseFloat(this.value);
                });
                $('.months').each(function(){
                    monthsSum += parseFloat(this.value);
                });
                var subtotal = priceSum * monthsSum;
                var sum = priceSum * months;
                var mwstValue = subtotal + 7.7 / 100 * subtotal - subtotal;
                document.getElementById('subtotal').value = subtotal.toFixed(2);
                document.getElementById('sum').value = subtotal.toFixed(2);
                document.getElementById('mwst').value = mwstValue.toFixed(2);
                var percentage = (mwst / 100) * subtotal;
                var result = subtotal + mwstValue - parseFloat(rabatt);
                document.getElementById('total').value = result;
        });

我的完整动态输入：

$('.btn-add-srvice').on('click', function(e){

            e.preventDefault();

            var template = 
            '<div class="col-md-12" style="padding:0">'+
                '<div class="col-md-6" style="padding-left:0px">'+
                    '<div class="form-group">'+
                         '<select style="width: 100%" id="service_id" name="service_id[]" class="service_id ">'+
                         '@foreach($servicesList as $sli)'+                                 
                         '<option value="{{$sli->id}}">{{$sli->name}}</option>'+
                          '@endforeach'+
                          '</select>'+
                    '</div>'+
                '</div>'+
                '<div class="col-md-3" style="padding-right:0px">'+
                    '<div class="form-group">'+
                        '<input type="text" name="price[]" id="price" value="" class="form-control price" />'+                      
                    '</div>'+
                '</div>'+
                '<div class="col-md-1" style="padding-right:0px">'+
                    '<div class="form-group">'+
                        '<input type="text" name="months[]" id="months" value="" class="form-control months" />'+                       
                    '</div>'+
                '</div>'+
                '<div class="col-md-2" style="padding-right:0px">'+
                    '<div class="form-group">'+
                        '<input type="text" name="sum[]" id="sum" value="" class="form-control sum" />'+                        
                    '</div>'+
                '</div>'+
                '<div>'+
                /*'<button type="button" class="btn btn-default btn-xs remove">Remove</button>'+*/
                '</div>'+
            '</div>';
    enter code here
            $(this).before(template);

        });

以下是目前的情况和预期结果：

---

您正在为多个元素提供相同的id。改为上课。然后得到他们的总数

var sum = 0;
$('.price').each(function(){
    sum += parseFloat(this.value);
});

在添加动态输入字段时，您应该提供唯一的id 对于每个字段。 然后维护唯一ID的列表。 迭代该列表并计算总和。

---

首先，用于添加输入的模板字符串是错误的，顾名思义，ID是唯一标识符，在页面上只能使用一次。您不需要id，因此将其从模板中删除

var template = '<input type="text" name="price[]" class="form-control" />':

像这样试试。在HTML元素中使用类，在jquery中尝试循环并获取值并求和

$'.btn添加srvice'。单击，函数E{ e、 防止违约； var模板=； $this.beforemplate； }; $document.on'keyup'，.price，function{ var合计=0； $'.price'.eachfunction{ 总计+=parseFloat$this.val； } console.logtotal }

---

给每个输入一个公共类。下面的代码让我们来试试

功能剂量{ var x_name=document.getElementsByClassNamex_name forvar i=0；i请，以便未来用户可以更轻松地遵循您的想法/代码。-感谢您的帮助，它正在使用click event button，但我正在尝试使用keydown keyup change events，它不起作用，它只显示第一个输入值。你能帮我一下吗？我已经补充了一个问题，你能帮我一下吗？

var sum = 0;
$('.price').each(function(){
    sum += parseFloat(this.value);
});

let subtotal;

const summOfValues = (summ, element) => summ + Number(element.value);

$('.btn-add-srvice').on('input', function(){
   subtotal = $('[name="price[]"]',this).toArray().reduce(summOfValues);
   $('other').val(subtotal);
})

var template = '<input type="text" name="price[]" class="form-control" />':

function sum() {
    var priceElements = document.querySelectorAll('[name^=price]');
    var sum = 0;
    priceElements.forEach(function(element) {
       sum = sum + element.value;
    });
    console.log(sum);   
}