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

变量总和 = 0;

总和 += isNaN($(this).val()) || $.trim($(this).val()) === '' ？0 : parseFloat(this.val());

Answer 2

$('.add').keyup( function(){
  var sum = 0;

   $('.add').each(function(){
         sum +=  this.value && (this.value|0) && parseFloat( this.value ) || 0;
    });
   $('#total').text(sum);

});

Answer 3

如果您要添加的是数字，那么这应该可以：

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

演示

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

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