【问题标题】：jQuery sum of input values in sections各节中输入值的jQuery总和
【发布时间】：2012-12-17 23:57:44
【问题描述】：

我正在尝试在多个部分中查找输入值的总和。到目前为止，我已经把我的代码放在下面了。

HTML：

<div class="section">
  <input type="radio" name="q1" value="2"/>
  <input type="radio" name="q2" value="0"/>
  <input type="radio" name="q3" value="1"/>
  <input type="radio" name="q4" value="3"/>
</div>

jQuery：

$('.section').each(function(){
  var totalPoints = 0;
  $(this).find('input').each(function(){
    totalPoints += $(this).val();
  });
  alert(totalPoints);
});

请注意，这是我实际使用的代码的简化版本。所以我希望这能提醒 2 个值（每个部分的总和）：8 然后 6。相反，我只是得到所有值的字符串。所以第一节提醒0143。

任何想法如何获得累积总和而不是字符串？

【问题讨论】：

标签： javascript jquery input

【解决方案1】：

你正在做 "1"+"1" 并期望它是 2 (int)

不是。

一个非常快速（不完全正确）的解决方案是：

$('.section').each(function(){
  var totalPoints = 0;
  $(this).find('input').each(function(){
    totalPoints += parseInt($(this).val()); //<==== a catch  in here !! read below
  });
  alert(totalPoints);
});

抓住？为什么？

回答：如果你不这样做，你应该总是使用基数，前导零是八进制！

 parseInt("010") //8 ( ff)
 parseInt("010") //10 ( chrome)


 parseInt("010",10) //10 ( ff)
 parseInt("010",10) //10 ( chrome)

嗯....你明白了。提供基数！

编辑

最终解决方案（使用.each( function(index, Element) )）

$('.section').each(function(){
      var totalPoints = 0;
      $(this).find('input').each(function(i,n){
        totalPoints += parseInt($(n).val(),10); 
      });
      alert(totalPoints);
    });

【讨论】：

有点有趣的是，您提出了需要指定基数的重要观点，但在他的代码的更新版本中实际上并没有这样做。
@AnthonyGrist 我更愿意向他展示解决方案 + 一个大警告，以便他记住。
这个答案现在令人困惑且无益。
我正在将此代码用于移动网络应用程序，所以我想这只是我需要介绍的 webkit。但是感谢您的解释！
我认为不需要使用 parseInt 因为如果你想添加十进制输入那么它会给你正确的结果。您可以使用 eval 代替 parseInt。看下面的例子

【解决方案2】：

使用parseFloat() 或parseInt()

var totalPoints = 0;
$('.section input').each(function(){
        totalPoints = parseFloat($(this).val()) + totalPoints;
});
alert(totalPoints);

【讨论】：

【解决方案3】：

该值存储为字符串，因此调用+= 正在执行字符串连接。你想/需要把它当作一个数字，所以它会加法。使用parseInt() 函数将其转换为数字：

totalPoints += parseInt($(this).val(), 10);

【讨论】：

向他展示答案而不解释问题在哪里（基数）不是本网站的内容。你没有让他变得更聪明。你只是向他展示了答案。很有教育意义！
@RoyiNamir 关键是他需要将字符串转换为整数，以便它进行加法而不是连接。我还将他链接到 parseInt() 的 MDN 文档，该文档有关于指定基数的警告，我在答案中包含了一个基数，因为它需要在那里。
我不是在和你争论。我们都是对的。这里没有竞争。

【解决方案4】：

javascript函数 parseInt() 应该可以满足您的要求，这是一个小提琴： http://jsfiddle.net/k739M/

还有一些格式化的代码：

$('.section').each(function(){
    var totalPoints = 0;
    $(this).find('input').each(function(){
        totalPoints += parseInt($(this).val());
    });

    alert(totalPoints);
});

此外，如果您要在“.section input”上调用 $(each)，您可以减少处理时间（和代码）。

var totalPoints = 0;

$('.section input').each(function(){
    totalPoints += parseInt($(this).val());
});

alert(totalPoints);

【讨论】：

在'.section input' 选择器上调用.each() 将完全改变功能。此外，parseInt() 是纯 JavaScript，而不是 jQuery 函数。

【解决方案5】：

Use eval instead of parseInt
var a = "1.5";
var b = "2";
var c = parseInt(a) + parseInt(b);
console.log(c); //result 3

var a = "1.5";
var b = "2";
var c = eval(a) + eval(b);
console.log(c); //result 3.5 this is accurate

【讨论】：

【解决方案6】：

也可以使用Array的reduce()方法求和：

var arrayOfValues = $('.section input[type=radio]').map(function(index, input) {
    return parseInt($(input).val());
}).toArray();
var sum = arrayOfValues.reduce(function(val1, val2) {
    return val1 + val2;
});

【讨论】：