jQuery 计算所有文本字段中的值的总和
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2417553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery calculate sum of values in all text fields
提问by stef
I have an order form with about 30 text fields that contain numerical values. I'd like to calculate the sum of all those values on blur.
我有一个包含大约 30 个包含数值的文本字段的订单。我想计算所有这些值的总和。
I know how to select all text fields but not how to loop through them and add up all their values?
我知道如何选择所有文本字段，但不知道如何遍历它们并将它们的所有值相加？
$(document).ready(function(){
$(".price").blur(function() {
//loop and add up every value from $(".price").val()
})
});
回答by Marko Dumic
?
?
$('.price').blur(function () {
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
// here, you have your sum
});?????????
回答by ubershmekel
A tad more generic copy/paste function for your project.
为您的项目提供更通用的复制/粘贴功能。
sumjq = function(selector) {
var sum = 0;
$(selector).each(function() {
sum += Number($(this).text());
});
return sum;
}
console.log(sumjq('.price'));
回答by mark.monteiro
If you don't need to support IE8 then you can use the native Javascript Array.prototype.reduce()method. You will need to convert your JQuery object into an array first:
如果您不需要支持 IE8，那么您可以使用原生 JavascriptArray.prototype.reduce()方法。您需要先将 JQuery 对象转换为数组：
var sum = $('.price').toArray().reduce(function(sum,element) {
if(isNaN(sum)) sum = 0;
return sum + Number(element.value);
}, 0);
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
参考：https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
回答by Bron Davies
Similarly along the lines of these answers written as a plugin:
同样沿着这些作为插件编写的答案的路线：
$.fn.sum = function () {
var sum = 0;
this.each(function () {
sum += 1*($(this).val());
});
return sum;
};
For the record 1 * x is faster than Number(x) in Chrome
记录 1 * x 比 Chrome 中的 Number(x) 快
回答by Deniss Kozlovs
Use this function:
使用这个功能：
$(".price").each(function(){
total_price += parseInt($(this).val());
});
回答by Bvandorp
This should fix it:
这应该解决它：
var total = 0;
$(".price").each( function(){
total += $(this).val() * 1;
});
回答by CMMaung
$(".price").each(function(){
total_price += parseFloat($(this).val());
});
please try like this...
请尝试这样...
回答by Sadikhasan
回答by bajcepsme
This will work 100%:
这将 100% 工作：
<script type="text/javascript">
function calculate(){
var result = document.getElementById('result');
var el, i = 0, total = 0;
while(el = document.getElementById('v'+(i++)) ) {
el.value = el.value.replace(/\D/,"");
total = total + Number(el.value);
}
result.value = total;
if(document.getElementById('v0').value =="" && document.getElementById('v1').value =="" && document.getElementById('v2').value =="" ){
result.value ="";
}
}
</script>
Some number:<input type="text" id ="v0" onkeyup="calculate()"><br>
Some number:<input type="text" id ="v1" onkeyup="calculate()"><br>
Some number:<input type="text" id ="v2" onkeyup="calculate()"><br>
Result: <input type="text" id="result" onkeyup="calculate()" readonly><br>
