javascript - js中如何汇总所有动态输入

Question

如何获得所有这些输入的总和？有时它们有来自数据库的值，有时没有值并且需要输入。我为此使用 jquery。

请参阅下面的代码:

$(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, 10);
		})
		.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 + parseFloat(value, 10);
	}
});

<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 .

您不需要调用parseFloat()再次在您的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> 元素，以避免出于演示目的而必须向下滚动才能查看总数。)