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

Question

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

这是我的示例代码：

Java脚本

$(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

<input type="checkbox" name="selectProducts" id="product1" value="5" />
<input type="checkbox" name="selectProducts" id="product2" value="5" />
<input type="checkbox" name="selectProducts" id="product3" value="5" />
<!-- i want to include these input type text -->
<input type="text" name="selectProducts" id="product4" value="10" />
<input type="text" name="selectProducts" id="product5" value="10" />
<span name="products" id="products"></span>

输出值

5,5,5,10,10


35  <!-- my desired output should look like this -->

我想将所有这些加起来，得出35总数。 请帮我。

Answer 1

除了语法错误以外，您的方法还对，但实际上并没有对其进行总结。 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); }); }); 

 <input type="checkbox" name="selectProducts" id="product1" value="5" /> <input type="checkbox" name="selectProducts" id="product2" value="5" /> <input type="checkbox" name="selectProducts" id="product3" value="5" /> <!-- i want to include these input type text --> <input type="text" name="selectProducts" id="product4" value="10" /> <input type="text" name="selectProducts" id="product5" value="10" /> <span name="products" id="products"></span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

您可以通过设置变量（在此示例中为count ）并使用each函数而不是map来做到这一点：

 $(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); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="selectProducts" id="product1" value="5" /> <input type="checkbox" name="selectProducts" id="product2" value="5" /> <input type="checkbox" name="selectProducts" id="product3" value="5" /> <input type="text" name="selectProducts" id="product4" value="10" /> <input type="text" name="selectProducts" id="product5" value="10" /> <span name="products" id="products"></span> 

Answer 3

使用.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); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="selectProducts" id="product1" value="5" /> <input type="checkbox" name="selectProducts" id="product2" value="5" /> <input type="checkbox" name="selectProducts" id="product3" value="5" /> <input type="text" name="selectProducts" id="product4" value="10" /> <input type="text" name="selectProducts" id="product5" value="10" /> <span name="products" id="products"></span>