Question

我有一堆带有“selectme quantity”类的输入框，想要将所有数量加在一起。

例如：

<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 Fiddle demo

或者，如果您使用的浏览器支持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 Fiddle demo

参考文献：

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 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

对多个输入框值求和

2 个答案: