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

Add various input fields together using javascript

本文关键字：字段 添加 到一起 输入 javascript 使用      更新时间：2023-09-26

>我有几个文本字段

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

但这并没有输出任何东西

我做错了什么吗？

干杯

如果你要添加的数字，那么这应该有效： 

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

演示

如果您希望这在页面加载时起作用，请在 .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);
}

var sum = 0;

sum += isNaN（$（this）.val（）） || $.trim（$（this）.val（））

=== '' ？ 0 ： parseFloat（this.val（））;

$('.add').keyup( function(){
  var sum = 0;
   $('.add').each(function(){
         sum +=  this.value && (this.value|0) && parseFloat( this.value ) || 0;
    });
   $('#total').text(sum);
});
相关文章：