總和多個輸入框值

Question

我有一堆inputboxes與類「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 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。

參考文獻：

• 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