如何在可重復字段容器內動態求和輸入值？
[英]How do I dynamically sum input values inside a repeatable fields container?
問題描述
我在 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>
我想將每個子 rf 行（不包括模板子 rf 行）內的類“add-monthly”的所有輸入添加到 rf 行（它的父行）內的“sum-monthly”。
我想在用戶輸入之前計算總和值（在 document.ready 上）。 以及在每月添加輸入之一的“keyup”事件上動態更新它。
我怎樣才能最好地在 jQuery 中做到這一點？
3 個解決方案
解決方案1
0 2018-08-27 11:56:13
你可以做這樣的事情......
$(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);
}
解決方案2
0 2018-08-27 13:36:38
為了實現您的目標，您需要引用所需的input字段，遍歷它們並計算它們的總和，最后將該總和放在.add-monthly字段中。 但是您需要注意某些字段中可能存在的非數字值，因此，在下面的sumUpdate函數中，只有當該值是有效數字時，我才將input字段的值添加到總和中，十進制數字也是允許。
這是一個片段來說明所有所說的內容：
$(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：我在上面的代碼中添加了一些有用的注釋，請嘗試閱讀它們，因為它們可能對您有所幫助。
希望我能進一步推動你。
解決方案3
-1 2018-08-27 11:55:34
這可能對你有幫助
<!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>
如何找到在使用Javascript動態創建的某些字段中輸入的值的總和？
[英]How do I find the sum of the values entered in certain fields that were created dynamically using Javascript?
如何使用Javascript動態生成輸入字段，然后使用它們的值？
[英]How can I dynamically generate input fields with Javascript and then use their values?
如何在表單中找到所有輸入字段並使用Javascript將其值復制到textarea？
[英]How do I find all input fields inside a form and copy their values into textarea using Javascript?
如何將動態創建的輸入（或文本框）值發送到iframe，並在iframe中將其顯示為HTML？
[英]How do I send my dynamically created input (or textbox) values to an iframe and show it as HTML inside the iframe?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.