Question

如何获得所有这些输入的总和？有时他们有database的值，有时没有值，需要输入。我正在使用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()混合起来。）

＆＃13;

$(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
  }
});

＆＃13;

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

＆＃13;

（我已删除了大部分<br>元素，只是为了避免向下滚动以查看总数以用于演示目的。）

如何总结js中的所有动态输入

1 个答案: