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

var sum = 0;

sum + = 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);

DEMO

如果您希望在页面加载时使用此功能，请在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);
}

使用javascript添加各种输入字段

3 个答案: