jQuery计算所有文本字段中的值的总和

时间:2010-03-10 14:22:57

标签: jquery

我的订单有大约30个包含数值的文本字段。我想计算所有这些模糊值的总和。

我知道如何选择所有文本字段但不知道如何循环显示它们并将它们的所有值相加?

$(document).ready(function(){
   $(".price").blur(function() {
    //loop and add up every value from $(".price").val()
   })
});

9 个答案:

答案 0 :(得分:186)

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

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

答案 1 :(得分:22)

为您的项目提供更多通用的复制/粘贴功能。

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

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

答案 2 :(得分:7)

如果您不需要支持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

答案 3 :(得分:4)

同样沿着这些答案写成插件:

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

对于记录,1 * x比Chrome中的数字(x)快

答案 4 :(得分:2)

使用此功能:

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

答案 5 :(得分:1)

这应该解决它:

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

答案 6 :(得分:0)

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

请尝试这样......

答案 7 :(得分:0)

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

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

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

<强> JS Fiddle

答案 8 :(得分:0)

这将分叉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>