如何總結js中的所有動態輸入

Question

如何獲得這些輸入的所有總和？有時它們的值爲database，有時沒有值並需要輸入。我爲此使用jquery。

請參閱下面的代碼：

$(document).ready(function(){ 
 
    $('input[name=grade\\[\\]]').on('focus, keyup', function(){ 
 
    var points = $('input[name=grade\\[\\]]'); 
 

 
\t \t var totals = points.get() 
 
\t \t \t .map(function(sel){ 
 
\t \t \t return parseFloat(sel.value, 10); 
 
\t \t }) 
 
\t \t .reduce(getSum, 0); 
 

 

 
\t \t if(points.length == 1){ 
 
\t \t \t $('input[name=total]').val($(this).val()); 
 
\t \t } else if(points.length > 1 && totals < 100){ 
 
\t \t \t $('input[name=total]').val(totals); 
 
\t \t } 
 
    
 
    
 
\t }); 
 
    
 
    
 
    function getSum(total, value){ 
 
\t \t return total + parseFloat(value, 10); 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 

 
<input type="text" name="grade[]" ><br><br> 
 
<input type="text" name="grade[]" ><br><br> 
 
<input type="text" name="grade[]" ><br><br> 
 
<input type="text" name="grade[]" ><br><br> 
 
<input type="text" name="grade[]" ><br><br><br> 
 

 
Total<br> 
 
<input type="text" name="total" readonly> 
 

 
</form>

Answer 1

的問題是，parseFloat()回報NaN當值不能被解析爲一個號碼，並添加了一個列表的結果其中包括一些NaN的值將是NaN。這意味着你的if/else決定是否顯示總數將不會顯示它，因爲NaN < 100是false。

鑑於您的輸入是空的，以這些項目開始的分析爲NaN。

最簡單的解決方法是改變這一行你.map()功能：

 return parseFloat(sel.value, 10); 

是：

 return parseFloat(sel.value) || 0; 

...其中||操作人員如果返回左側操作數是一個真值，即一個數字，不是NaN或0，否則返回右邊的操作數0。也就是說，空白或其他非數字值將被視爲0。

你不需要在getSum()函數中再次調用parseFloat()，因爲那時你已經有了數字。

（還要注意parseFloat()並不需要第二個參數，你混那以parseInt()。）

$(document).ready(function() { 
 
    $('input[name=grade\\[\\]]').on('focus, keyup', function() { 
 
    var points = $('input[name=grade\\[\\]]'); 
 

 
    var totals = points.get() 
 
     .map(function(sel) { 
 
     return parseFloat(sel.value) || 0; // <-- this is the line that changed 
 
     }) 
 
     .reduce(getSum, 0); 
 

 
    if (points.length == 1) { 
 
     $('input[name=total]').val($(this).val()); 
 
    } else if (points.length > 1 && totals < 100) { 
 
     $('input[name=total]').val(totals); 
 
    } 
 
    }); 
 

 
    function getSum(total, value) { 
 
    return total + value;  // <-- no need for parseFloat() here 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" name="grade[]"> 
 
    <input type="text" name="grade[]"> 
 
    <input type="text" name="grade[]"> 
 
    <input type="text" name="grade[]"> 
 
    <input type="text" name="grade[]"><br><br><br> Total 
 
    <br> 
 
    <input type="text" name="total" readonly> 
 
</form>

（我已經刪除大部分<br>元素只是爲了避免不得不向下滾動以查看用於演示目的的總數。）