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になります。これは、NaN < 100がfalseなので、合計を表示するかどうかを決定するif/elseが表示されないことを意味します。

あなたの入力が空であるとすれば、それらの項目はNaNとして解析されます。

最も簡単な修正プログラムは、あなたの.map()機能で、この行を変更することです：

 return parseFloat(sel.value, 10); 

する：それならば||オペレータは、左側のオペランドを返します

 return parseFloat(sel.value) || 0; 

...真偽値、つまり数字ではなく、NaNまたは0で、そうでない場合は右オペランド0を返します。つまり、空白または数値以外の値は、あたかも0のように扱われます。

は、getSum()関数で再度呼び出す必要はありません。これは、すでに数値があるためです。

（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>要素のほとんどを削除しましたデモの目的で合計を見るためにスクロールしないようにするだけです）