如何使用javascript / jquery在更改范围内写入所有输入类型值的总和？

目前，我可以输出它们的每个值并将其显示为一个系列，但我想要的是将它们的所有值相加并显示它的总和。

这是我的示例代码：

使用Javascript

$(function() { $('input[name=selectProducts]').on('change', function() { $('#products').text($('input[name=selectProducts]:checked, input[name=selectProducts][type=text]'').map(function() { return this.value; }).get()); }); }); 

HTML

OUTPUT

 5,5,5,10,10 35  

我想总结所有这些以获得总数35 。 请帮我。

Answer 1

使用.toArray()将jquery对象转换为数组，并使用.reduce()循环遍历数组项和求和值。

 $('input[name=selectProducts]').on('change', function() { $('#products').text(function(){ return $('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').toArray().reduce(function(tot, val) { return tot + parseInt(val.value); }, 0); }); }); 

 $('input[name=selectProducts]').on('change keyup', function() { $('#products').text(function(){ return $('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').toArray().reduce(function(total, val) { return total + parseInt(val.value); }, 0); }); }); 

Answer 2

除了语法错误之外，你正朝着正确的方向前进，但实际上并没有对它们进行总结。 Array#reduce是用于对数组中的值求和的经典工具。 看评论：

 $(function() { $('input[name=selectProducts]').on('change', function() { // Get the values, turn them into numbers var values = $('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').map(function() { return +this.value; // ^---- coerce to number }).get(); // Sum them up var sum = values.reduce(function(a, b) { return a + b; }); // Show the result $('#products').text(sum); }); }); 

Answer 3

您可以通过设置变量（在此示例中为count ）并使用each函数而不是映射来完成此操作：

 $(function() { let count; $('input[name=selectProducts]').on('change', function() { count = 0; $('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').each(function(){ count += parseInt(this.value); }) $('#products').text(count); }); });