如何在可重復字段內動態求和輸入值？
[英]How do I dynamically sum input values inside a repeatable fields?
問題描述
我如何才能獲得動態創建的每個字段值的總計
<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
由於已經標記了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
請檢查此代碼，這可能會有所幫助
<!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>
解決方案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
如果要動態添加input字段，建議將更改功能委派給父.count-container 。 觸發事件后，我將遍歷.add-monthly字段以總結其值。 為了幫助JavaScript理解這些值是浮點數（因為我假設我們正在處理貨幣），所以我使用parseFloat（）來確保可以將值添加到總和中。 最后，我將.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>
如何找到在使用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.