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

问题

Currently, i can output each of their value and display it as a series, but what i want is to sum all of their values and display its total.

This is my sample Code:

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>

OUTPUT

5,5,5,10,10


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

I want to sum all of them to get the total of 35. Please help me.

回答1:

Use .toArray() to converting jquery object to array and use .reduce() to loop through array items and sum values.

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

回答2:

You're headed the right way other than a syntax error, but you haven't actually summed them up. Array#reduce is the classic tool for summing values in an array. See comments:

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

You could do it by setting a variable (count in this example) and using an each function instead of the 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>

来源：https://stackoverflow.com/questions/52531497/how-to-write-sum-of-all-input-types-values-in-span-on-change-using-javascript-jq

标签

javascript

jquery

html

html-input