Как записать сумму всех значений входных типов в span при изменении, используя javascript / jquery? - PullRequest
Новая
       20

Как записать сумму всех значений входных типов в span при изменении, используя javascript / jquery?

0 голосов
/ 27 сентября 2018

В настоящее время я могу вывести каждое из их значений и отобразить их в виде серии, но я хочу суммировать все их значения и отобразить их итоги.

Это мой пример кода:

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

Я хочу сложить все из них, чтобы получить в общей сложности 35.Пожалуйста, помогите мне.

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Вы идете правильным путем, кроме синтаксической ошибки, но вы на самом деле не суммировали их.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>
0 голосов
/ 27 сентября 2018

Используйте .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>
0 голосов
/ 27 сентября 2018

Вы можете сделать это, установив переменную (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>
...