JQuery 计算所有文本字段的值之和

我有一个包含约30个文本字段的订单表单，这些文本字段包含数值。我想计算一下侠影上所有这些值的总和。

我知道如何选择所有的文本字段，但不知道如何循环通过它们并添加它们的所有值？

$(document).ready(function(){
$(".price").blur(function() {
//loop and add up every value from $(".price").val()
})
});
278361 次浏览
小开
最佳答案 

$('.price').blur(function () {
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});


// here, you have your sum
});​​​​​​​​​
小开

使用此功能:

$(".price").each(function(){
total_price += parseInt($(this).val());
});
小开

这应该能解决问题:

var total = 0;
$(".price").each( function(){
total += $(this).val() * 1;
});
小开 
$(".price").each(function(){
total_price += parseFloat($(this).val());
});

请试试这样..。

小开

为您的项目提供一个更通用的复制/粘贴函数。

sumjq = function(selector) {
var sum = 0;
$(selector).each(function() {
sum += Number($(this).text());
});
return sum;
}


console.log(sumjq('.price'));
小开

类似地，这些答案都是以插件的形式写出来的:

$.fn.sum = function () {
var sum = 0;
this.each(function () {
sum += 1*($(this).val());
});
return sum;
};

根据记录，1 * x 比 Chrome 中的 Number (x)快

小开 
$('.price').blur(function () {
var sum = 0;
$('.price').each(function() {


if($(this).val()!="")
{
sum += parseFloat($(this).val());
}


});
alert(sum);
});​​​​​​​​​

JS 小提琴

小开

如果您不需要支持 IE8，那么您可以使用本地 Javascript Array.prototype.reduce()方法。首先需要将 JQuery 对象转换为数组:

 var sum = $('.price').toArray().reduce(function(sum,element) {
if(isNaN(sum)) sum = 0;
return sum + Number(element.value);
}, 0);

参考资料: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

小开

这将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()">
Some number:<input type="text" id ="v1" onkeyup="calculate()">
Some number:<input type="text" id ="v2" onkeyup="calculate()">
Result: <input type="text" id="result" onkeyup="calculate()"  readonly>

提交答案