Подсчёт значений в нескольких инпута

238

14 февраля 2017, 20:55

Есть конструкция:

<div>
  <div>
    <button>-</button>
    <input type="number">
    <button>+</button>
  </div>
  <div>
    <button>-</button>
    <input type="number">
    <button>+</button>
  </div>
  <div>
    <button>-</button>
    <input type="number">
    <button>+</button>
  </div>
</div>

По нажатию на кнопку я повесил событие change для инпута. Теперь хочу по событию change запускать функцию, которая будет считать и суммировать числа из каждого инпута. Например, если в первом инпуте 3, во втором 5, а в третьем 8, то результатом выполнения функции будет вывод числа 16. Как можно реализовать подсчёт не обращаясь к классам и :nth-селекторам?

Answer 1

var res = 0.0;
$("input[type='number']").each(function(){
    res += parseFloat($(this).val());
});

Как-то так.

Answer 2

Решил свой вопрос:

$(function(){
  var input = $('.passengers-list').find('.numeric-input');
  var passengers;
  input.on('change', function(){
    passengers = 0;
    $(input).each(function(){
      passengers += parseInt($(this).val());
    });
    updatePassengers(passengers)
  });
});

В ответе пользователя @Міша счётчик только прибавлял и если была нажата кнопка "минус", которая уменьшала значение в соседнем инпуте, то общее значение всё равно бы увеличилось. Из-за чего глобальное значение всегда нужно обнулять.