Question

每当其中一个值发生变化时，我想计算表单内很多输入字段的所有数值的总和。我认为这段代码非常接近，但是当我改变两次相同的输入时，这是错误的。

tot = 0;
$('form#form-id :input').change(function(){
  $("form#form-id :input").each(function(){
    tot += Number($(this).val());
  });
  console.log(tot);
});

这似乎也适用于jsFiddle https://jsfiddle.net/yq9zenaz/但我在生产中获得了NaN。

Answer 1

在本地定义变量，否则每次调用global处理程序时都会更新change值。

$('form#lines-form-1 :input').change(function() {
  var tot = 0;
  $("form#lines-form-1 :input").each(function() {
    tot += Number($(this).val());
    // Could be written as
    // tot += +this.value;
  });
  $('#tot-qty').text(tot);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="lines-form-1">
  <input type="number" name="i1">
  <br>
  <input type="number" name="i2">
  <br>
  <input type="number" name="i3">
  <br>
  <input type="number" name="i4">
  <br>
  <input type="number" name="i5">
  <br>

</form>
<div id="tot-qty">0</div>

Updated Fiddle

Answer 2

在回调中重置tot，否则您将继续添加数字，但这不是正确的值。

更新了您的小提琴：https://jsfiddle.net/yq9zenaz/1/

var tot = 0;
$('form#lines-form-1 :input').change(function(){
    tot = 0;
    $("form#lines-form-1 :input").each(function(){
        tot += Number($(this).val());
    });
    console.log(tot);
    $('#tot-qty').text(tot);
});

如果您不需要全局访问tot，只需在内部使用它：

$('form#lines-form-1 :input').change(function(){
    var tot = 0;
    $("form#lines-form-1 :input").each(function(){
        tot += Number($(this).val());
    });
    console.log(tot);
    $('#tot-qty').text(tot);
});

Answer 3

每次都需要将tot重置为零

＆＃13;

tot = 0;
$('input').change(function(){
  tot = 0;
  $("input").each(function(){
    tot += Number($(this).val());
  });
  console.log(tot);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>
<input/>

＆＃13;

Answer 4

您应该在变更处理程序中初始化变量tot。

$('form#lines-form-1 :input').change(function(){
  tot = 0;
  $("form#lines-form-1 :input").each(function(){
    tot += Number($(this).val());
  });
  console.log(tot);
  $('#tot-qty').text(tot);
});

Answer 5

在tot中声明change变量，并使用变量关键字

声明它

$('form#lines-form-1 :input').change(function(){
var tot = 0;
  $("form#lines-form-1 :input").each(function(){
    tot += Number($(this).val());
  });
  console.log(tot);
  $('#tot-qty').text(tot);
});

JSFIDDLE

Answer 6

这是另一种解决方案：

我们做的是获取所有输入的jQuery集合，使用.map()创建输入值的jQuery集合，使用.get从jQuery对象获取数组。完成所有操作后，我们在数组上运行.reduce并使用add函数来获取所有值的总和。

var $inputs = $("form#lines-form-1 :input");

$inputs.change(function() {
  var tot = $inputs
    .map(function() {
      return Number(this.value);
    })
    .get()
    .reduce(function(a, b) {
      return a + b;
    });

  console.log(tot);
  $('#tot-qty').text(tot);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="lines-form-1">
<input type="number" name="i1"><br>
<input type="number" name="i2"><br>
<input type="number" name="i3"><br>
<input type="number" name="i4"><br>
<input type="number" name="i5"><br>

</form>
<div id="tot-qty">0</div>

如果你希望 tot在父范围内，你可以将它的声明移到.change事件之外，它仍然有效，因为它完全是重新分配而不是添加到。

jQuery - 对表单中的每个输入值求和

6 个答案:

Updated Fiddle