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

【问题标题】：jQuery calculate sum of values in all text fieldsjQuery计算所有文本字段中的值的总和
【发布时间】：2021-02-18 18:07:00
【问题描述】：

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

我知道如何选择所有文本字段，但不知道如何遍历它们并将它们的所有值相加？

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

【问题讨论】：

查看JQuery每个函数(api.jquery.com/each)
只想知道一件事。为什么上面发的被问者没有被问及他所做的研究工作。由于发布的问题没有显示任何研究工作或他至少尝试了什么，特别是当问题不是一个非常棘手和复杂的问题时。上述问题的解决方案可以很容易地通过谷歌获得 22 票。赞成票没有问题，但研究工作呢？是因为 Stack 上分数较低的成员被问及研究工作吗？
Sum using jQuery each function的可能重复

标签： jquery

【解决方案1】：

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

    // here, you have your sum
});

【讨论】：

Thx @MarkoDumic 但如果我想要小计（数量 * 价格）然后计算大盘怎么办！
对于更优雅的解决方案，您可以使用 Array.prototype.reduce：stackoverflow.com/a/37466639/1988326

【解决方案2】：

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

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

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

【讨论】：

我认为您的意思是 .val() 而不是 .text()
@PeterMeth 似乎取决于stackoverflow.com/questions/807867/…

【解决方案3】：

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

【讨论】：

【解决方案4】：

类似地，将这些答案写成插件：

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

据记录 1 * x 在 Chrome 中比 Number(x) 快

【讨论】：

【解决方案5】：

使用此功能：

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

【讨论】：

价格并不总是整数。
我想你会想要parseFloat()

【解决方案6】：

这应该可以解决它：

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

【讨论】：

这将连接从 .val() 返回的字符串。
匿名用户的建议是使用以下内容：var total = 0; $(".price").each( function(){ total += $(this).val() * 1; });

【解决方案7】：

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

请尝试这样...

【讨论】：

我不确定你想要这个："2 apples" + "3 oranges" => 5
我有一个订单表格，其中包含大约 30 个文本字段包含数值。
我不知道为什么你，Marko，会认为他的方法是为了增加价值以外的任何东西。

【解决方案8】：

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

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

    });
        alert(sum);
});

JS Fiddle

【讨论】：

【解决方案9】：

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

【讨论】：

嗨，欢迎来到 Stack Overflow。在回答已经有很多答案的问题时，请务必添加一些额外的见解，说明为什么您提供的回复在某种程度上是实质性的，而不是简单地呼应原始发帖人已经审查过的内容。