如何使用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>