如何使用 javascript/jquery 在跨度中写入所有输入类型值的总和？

Question

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

这是我的示例代码：

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

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

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

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

使用 .toArray() to converting jquery object to array and use .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>

如何使用 javascript/jquery 在跨度中写入所有输入类型值的总和？

How to write sum of all input types values in span on change using javascript/jquery?

html

javascript

jquery

html-input