jquery - 对多个输入框值求和

Question

我有一堆带有“selectme 数量”类的输入框，并且想将所有的数量加起来。

例如：

<input class="selectme quantity" value="4">
<input class="selectme quantity" value="1">
<input class="selectme quantity" value="5">

我怎样才能遍历所有这些输入并显示总值（它将是 10）？

Answer 1

我建议：

function summate (selector) {
    var sum = 0;
    $(selector).each(function(){
        sum += parseFloat(this.value) || 0;
    });
    return sum;
}

 summate('.selectme.quantity');

JS 小提琴演示。

或者，如果您使用的浏览器支持Array.reduce()：

var sum = $('.selectme.quantity').map(function(){
    return this.value && parseFloat(this.value);
}).get().reduce(function(a,b){
    return parseFloat(a) + parseFloat(b);
});

console.log(sum);

JS 小提琴演示。

参考：

• Array.reduce().
• get().
• map().
• parseFloat().

Answer 2

你可以为此制作一个小 jQuery 插件，如果这是你经常在页面上做的事情并且需要一些灵活性：

在此示例中，我将您的数量视为整数 - 即整数。如果您需要允许小数（即：3.5、1.002 等），您应该使用parseFloat而不是parseInt（感谢 David Thomas 的注释！）。

使用您的示例 HTML：

(function($){
    $.fn.extend({ 
        addElementValues: function() {
            var sum = 0;
            this.each(function() {
                sum += (typeof this.value != 'undefined' ? parseInt(this.value, 10) : 0);
            });
            return sum;
        }
    });
})(jQuery);

console.log($('.selectme').addElementValues()); // 10

在这里试试：http: //jsfiddle.net/GRMule/NhLBA/1/

文档

• jQuery.fn.extend- http://api.jquery.com/jQuery.fn.extend/
• jQuery.each- http://api.jquery.com/jQuery.each/
• parseInt在 MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt