jQuery 添加多个文本框

Question

我想知道是否有人可以帮助我。

我有一个网页，其中有一些文本框(动态数量，可以是 3，可以是 30)，每个用户都可以输入一个数字，底部有一个总数。

目前我有这个:

$('input.qty').change(function() {
// Get the current total value
var total = $('#total');
// Update it with the changed input's value
total.val(parseInt(total.val()) + parseInt($(this).val()));
});

示例 HTML:

<td><input type="text" class="qty" value="0" /></td>
<td><input type="text" class="qty" value="0" /></td>
<td><input type="text" class="qty" value="0" /></td>
<td><input type="text" id="total" value="0" /></td>

第一次添加很好，但是当您开始更改值时，它只是将新金额添加到总数中，而不是将所有框相加。

我该如何排序？也许以某种方式使用每个属性？

Answer 1

您可以使用.each()循环遍历它们。并将它们总结如下:

$('input.qty').change(function() {
  var sum = 0;
  $('input.qty').each(function() { sum += parseInt(this.value, 10); });
  $('#total').val(sum);
});

You can give it a try here ，如果您希望它在每次按键时进行计算，则使用 .keyup()而不是.change() , like this .