jquery - 使用 jQuery 计算具有相同类的输入值

Question

我需要编写一个脚本来计算工作时间。我有一个表，其中包含 6 个可能的小时数，需要在底部的字段中将它们加在一起。

HTML 如下所示:

<table>
 <tr>
  <td><input type="text" name="amount[]" class="countAmount"></td>
  <td>(...)</td>
 </tr>
 <tr>
  <td><input type="text" name="amount[]" class="countAmount"></td>
  <td>(...)</td>
 </tr>
 <tr>
  <td><input type="text" name="amount[]" class="countAmount"></td>
  <td>(...)</td>
 </tr>
 <tr>
  <td>Total: <span id="total"></span></td>
 </tr>
</table>

我正在尝试获取类的值 countAmount一起算的。

我不知道从哪里开始使用 jQuery 代码。我试过的一切都没有用，但主要问题是如何处理空值以及如何将值作为 INT 处理。

Answer 1

要查找输入:

var inputs = $('input.countAmount');

转换为数字并处理空格:

var num = parseInt($(input).val(), 10);
if (!isNaN(num)) {
    // It's a valid number, not blank, not "a" or "q", etc.
}

要遍历它们，请使用 each .

所以:

var total = 0;
$('input.classAmount').each(function() {
    var num = parseInt(this.value, 10);
    if (!isNaN(num)) {
        total += num;
    }
});

...由于在循环内， this将是 input ，并且要获取输入的值，您不需要 jQuery，即 value属性很好。

然后把它放在你的 total跨度:

$("#total").text(String(total));