如何在可重复字段容器内动态求和输入值？
[英]How do I dynamically sum input values inside a repeatable fields container?
问题描述
I have the following markup in HTML:
我在 HTML 中有以下标记：
<div class="rf-row count-container">
<input class="sum-monthly">
<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>
And I want to add all inputs with class 'add-monthly' inside each sub-rf-row (excluding template sub-rf-rows) to the 'sum-monthly' inside rf-row (it's parent).我想将每个子 rf 行（不包括模板子 rf 行）内的类“add-monthly”的所有输入添加到 rf 行（它的父行）内的“sum-monthly”。
I want to calculate the sum values before user input (on document.ready).我想在用户输入之前计算总和值（在 document.ready 上）。 As well as dynamically update it on a 'keyup' event on one of the add-monthly inputs.以及在每月添加输入之一的“keyup”事件上动态更新它。
How can I best do this in jQuery?我怎样才能最好地在 jQuery 中做到这一点？
3 个解决方案
解决方案1
0 2018-08-27 11:56:13
You can do something like this...你可以做这样的事情......
$(document).ready(function()
{
updateValues()
$('.sub-rf-row').keyup(updateValues);
});
function updateValues()
{
var sum=0;
$('.sub-rf-row:not(.template) input').each(function(){
sum+=parseInt($(this).val()=='' ? 0 : $(this).val());
});
$('.sum-monthly').val(sum);
}
https://jsfiddle.net/rt42fz9q/13/ https://jsfiddle.net/rt42fz9q/13/
解决方案2
0 2018-08-27 13:36:38
In order to acheive your goal, you need to reference the desired input fields, iterate through them and calculate their sum, finally place that sum in the .add-monthly field.为了实现您的目标，您需要引用所需的input字段，遍历它们并计算它们的总和，最后将该总和放在.add-monthly字段中。 But you nedd to watch out for the non-numeric values that may be present in some fields, so, in the sumUpdate function below I only add the input field's value to the sum only if that value is a valid number, also decimal numbers are allowed.但是您需要注意某些字段中可能存在的非数字值，因此，在下面的sumUpdate函数中，只有当该值是有效数字时，我才将input字段的值添加到总和中，十进制数字也是允许。
Here's a snippet to illustrate all what being said:这是一个片段来说明所有所说的内容：
$(function(){ var sumInput = $('.rf-row input.sum-monthly'), /* the 'sumInput' variable is the input field that will display the sum of the other inputs */ inputs = $('.sub-rf-row:not(.template) input.add-monthly'); /* the 'inputs' variable is an array containing the input fields with the class '.add-monthly' that are under '.sub-rf-row' element which doesn't have a '.template' class */ // Call the updateSum function to calculate the sum directly after the document has loaded. updateSum(); // Adding KeyUp event listener to the inputs inputs.on('keyup', updateSum); // Implementation of the updateSum function that will calcule the sum of the input fields. function updateSum() { sum = 0; inputs.each(function() { var val = +$(this).val(); // Notice the plus sign in front of $(this).val() with we cast the input value to an integer, the val variable could contain of value of NaN if the input value can't be casted to an input(in other words if the input value contains non-numeric characters). With that we also allow decimal numbers. sum += (val.toString() != 'NaN') ? val:0; // We only add valid numbers, otherwise we add 0 to the sum variable. }); sumInput.val(sum.toFixed(2).replace('.00', '')); // Assign the sum variable's value to the sumInput, allowing precision to only 2 decimal digits, and also stripping '.00' from the sum variable if it contains a natural number(like 2.00 => 2, 10.00 => 10, but any decimal number will remain the same: 2.8 => 2.80, 12.97 => 12.97). } });
<!-- I added some values for the input fields with '.add-monthly' class just to show that the 'updateSum' function executes when the document is loaded --> <div class="rf-row count-container"> <input class="sum-monthly"> <div class="sub-rf-row"> <input class="add-monthly" value="2.4"> </div> <div class="sub-rf-row"> <input class="add-monthly" value="8.2"> </div> <div class="sub-rf-row template"> <input class="add-monthly"> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Ps: I added some helpful comments to the code above, try to read them as they may help you. Ps：我在上面的代码中添加了一些有用的注释，请尝试阅读它们，因为它们可能对您有所帮助。
Hope I pushed you further.希望我能进一步推动你。
解决方案3
-1 2018-08-27 11:55:34
This may help yours这可能对你有帮助
<!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="sum-monthly">
<div class="sub-rf-row">
<input class="add-monthly" value="5">
</div>
<div class="sub-rf-row">
<input class="add-monthly" value="5">
</div>
<div class="sub-rf-row template">
<input class="add-monthly" value="5">
</div>
</div>
<script>
$(document).ready(function(){
var value = 0;
$('.count-container .sub-rf-row').each(function(){
value += parseInt($(this).find('.add-monthly').val()) ? parseInt($(this).find('.add-monthly').val()) : 0
})
$('.sum-monthly').val(value);
});
</script>
</body>
</html>
https://codepen.io/anon/pen/gdpZpR?editors=1010 https://codepen.io/anon/pen/gdpZpR?editors=1010
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.