如何使用javascript / jquery在更改时写入所有输入类型值的总和？答案

【问题标题】：How to write sum of all input types values in span on change using javascript/jquery?如何使用javascript / jquery在更改时写入所有输入类型值的总和？
【发布时间】：2019-03-03 01:04:03
【问题描述】：

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

这是我的示例代码：

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

<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 的总数。请帮帮我。

【问题讨论】：

标签： javascript jquery html html-input

【解决方案1】：

您可以通过设置一个变量（在本例中为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);
  });
});

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

【讨论】：

没有指向 map 和 get 调用（如果你只是循环，map 是错误的工具；each 是正确的工具），你仍然用数组而不是总和调用text。
@T.J.Crowder 谢谢，我已经简化并更新了我的答案。

【解决方案2】：

除了语法错误之外，您的方向是正确的，但您实际上并没有总结它们。 Array#reduce 是对数组中的值求和的经典工具。见 cmets：

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

【讨论】：

【解决方案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>

【讨论】：