javascript - 使用 javascript 将各种输入字段添加在一起

Question

我有几个文本字段

<input class="add" type="text">
<input class="add" type="text">
<input class="add" type="text">
<input class="add" type="text">
<p id="total"></p>

每个字段中的值是在页面加载时由 PHP 脚本动态添加的，但用户可以选择编辑它们。我一直在尝试找出一种使用 javascript 将所有值相加并将它们输出到 #total p 标记中的方法。我发现了一些脚本并尝试自己编写一个，但效果不佳。

我发现的最好的看起来像这样......

function addAll() {
  var sum = ""

  var values = $('.add').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  $('#total').text(sum);
}
$('.add').keyup(displayTotal);

但是没有输出任何内容

我做错了什么吗？

干杯

Answer 1

如果您要添加的是数字，那么这应该有效:

function addAll() {
  var sum = 0;
  $('.add').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  $('#total').html(sum);
}
$('.add').keyup(addAll);  

DEMO

如果您希望它在页面加载时起作用，请在 .ready() 函数中添加对 addAll 的调用。完整代码如下:

$(document).ready(function(){

  addAll();
  $('.add').keyup(addAll);  
})

function addAll() {
  var sum = 0;
  $('.add').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  $('#total').html(sum);
}