如何在可重复字段内动态求和输入值？
[英]How do I dynamically sum input values inside a repeatable fields?
问题描述
How can i get total of dynamically created each fields value 
我如何才能获得动态创建的每个字段值的总计
<div class="rf-row count-container">
<input class="total">
<div class="row">
<input class="add-monthly">
</div>
<div class="row">
<input class="add-monthly">
</div>
<div class="row">
<input class="add-monthly">
</div>
</div>
4 个解决方案
解决方案1
0 2018-08-27 14:18:56
Since you have jquery tagged, the following is the way you'd iterate over all your input s of class add-monthly and sum their values together, finally returning the sum value: 由于已经标记了jquery ，因此以下是您遍历add-monthly类的所有input add-monthly它们的值求和的方法，最终返回总和值：
function sumFields() {
var totalSum = 0;
$("input.add-monthly").each(function () {
totalSum += $(this).val();
});
return totalSum;
}
解决方案2
0 已采纳 2018-08-27 14:20:24
Please check this code this may help 请检查此代码，这可能会有所帮助
<!DOCTYPE html>
<html>
<head>
Demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="rf-row count-container">
<input class="total">
<div class="row">
<input class="add-monthly" value="5">
</div>
<div class="row">
<input class="add-monthly" value="5">
</div>
<div class="row">
<input class="add-monthly" value="5">
</div>
</div>
<script>
$(document).ready(function(){
var value = 0;
$('.count-container .row').each(function(){
value += parseInt($(this).find('.add-monthly').val()) ? parseInt($(this).find('.add-monthly').val()) : 0
})
$('.total').val(value);
});
</script>
</body>
</html>
check below link https://codepen.io/anon/pen/gdpZpR?editors=1010 检查以下链接https://codepen.io/anon/pen/gdpZpR?editors=1010
解决方案3
0 2018-08-27 14:21:36
var classes = document.getElementsByClassName('add-monthly') classes = [...classes] var result = classes .map(item => +item.value) .reduce((a, b) => a + b, 0); document.getElementsByClassName('sum-monthly')[0].value = result console.log('summ', result)
<div class="rf-row count-container"> SUM: <input class="sum-monthly"/><br/> <div class="sub-rf-row"> <input class="add-monthly" type="number" value="1"> </div> <div class="sub-rf-row"> <input class="add-monthly" type="number" value="4"> </div> <div class="sub-rf-row template"> <input class="add-monthly" type="number" value="0"> </div> </div>
解决方案4
0 2018-08-27 14:27:39
If you are dynamically adding input fields, I would suggest delegating the change functionality to the parent .count-container . 如果要动态添加input字段，建议将更改功能委派给父.count-container 。 Once the event is triggered, I am iterating over the .add-monthly fields to sum up their values. 触发事件后，我将遍历.add-monthly字段以总结其值。 To help JavaScript understand that these values are floats (since I assume we are dealing with a currency), I am using parseFloat() to insure the value can be added to the sum. 为了帮助JavaScript理解这些值是浮点数（因为我假设我们正在处理货币），所以我使用parseFloat（）来确保可以将值添加到总和中。 Lastly, I am setting the value of .sum-monthly to use toFixed() to format a number using a fixed-point notation (again I am assuming we are dealing with a currency). 最后，我将.sum-monthly的值设置为使用toFixed（）以定点表示法格式化数字（同样，我假设我们正在处理货币）。
$(document).ready(function() { $('.count-container').on('change', '.add-monthly', function() { let total = 0; $('.add-monthly').each(function() { total += parseFloat($(this).val()) || 0; }); $('.sum-monthly').val(total.toFixed(2)); }).find('.add-monthly').change(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="rf-row count-container"> <input class="sum-monthly" readonly> <div class="sub-rf-row"> <input class="add-monthly"> </div> <div class="sub-rf-row"> <input class="add-monthly"> </div> <div class="sub-rf-row template"> <input class="add-monthly"> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.