jquery - 使用 jQuery 汇总相似的输入名称

Question

我有一些动态创建的输入，其名称/ID 会增加。我想要：

1. 查找所有空白输入并用零填充它们
2. 将所有输入的数字加起来
3. 将该总数放入不同的输入中

我正在使用 jQuery 1.9.1。

像这样的行：

<input type="text" name="Amount1" id="Amount1" value="0" class="Amount">
<input type="text" name="Amount2" id="Amount2" value="" class="Amount">
<input type="text" name="Amount3" id="Amount3" value="10" class="Amount">
<input type="text" name="Amount4" id="Amount4" value="150" class="Amount">

并将总数放入：

<input type="text" name="Totals" id="Totals" value="" class="Totals">

这就是我认为可能有效，但甚至不接近的方法：

$('input[name^="Amount"]').each(function(){
    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
    emptyTextBoxes.each(function() {
        //total up numbers
          ???
    });
});

Answer 1

当然，这可以更容易地完成；第一条语句已经选择了您需要的所有输入字段：

var total = 0;

$('input[name^="Amount"]').each(function() {
    total += parseInt(this.value, 10) || 0;
});

$('#Totals').val(total);

parseInt()空值将返回NaN，因此我使用|| 0构造来有效地跳过它们（即添加0到总数中）。

Answer 2

你可以总结一下：

var total = 0;

emptyTextBoxes.each(function() {
    total += parseInt(this.value, 10);
});

或者.map()在较新的浏览器上：

var total = emptyTextBoxes.map(function() {
    return parseInt(this.value, 10);
}).get().reduce(function(a, b) {
    return a + b;
});

Answer 3

var total = 0;
$(".Amount").each(function() {
    if (this.value == '') { this.value = 0; }
    total += parseInt(this.value);
});
$('.Totals').val(total);

http://jsfiddle.net/jfGbq/