Как получить value всех input-ов?

219
16 сентября 2018, 12:50

Мне нужно получить значение всех инпутов, каждый из которых находится в родительском блоке. И полученные значения, сложить в сумме. 

    <div class="total">
         <input class="hidden-grand-total" value="130">
    </div>
<div class="total">
         <input class="hidden-grand-total" value="0">
    </div>
<div class="total">
         <input class="hidden-grand-total" value="80">
    </div>

Я пытаюсь сделать это примерно так:

$('.total').find('.hidden-grand-total').each(function(i) {
      console.log($('.total').find('.hidden-grand-total').val());
});
Answer 1

let id = $('.total').map(function(i, el) { 
  return $('.hidden-grand-total', el).val(); 
}).get(); 
console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="total"> 
  <input class="hidden-grand-total" value="130"> 
</div> 
<div class="total"> 
  <input class="hidden-grand-total" value="0"> 
</div> 
<div class="total"> 
  <input class="hidden-grand-total" value="80"> 
</div>

UPD Не заметил сразу, что нужна сумма значений. Исправляюсь:

let sum = $('.total').get().reduce(function(p, c) { 
  return +$('.hidden-grand-total', c).val() + p; 
}, 0); 
console.log(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="total"> 
  <input class="hidden-grand-total" value="130"> 
</div> 
<div class="total"> 
  <input class="hidden-grand-total" value="0"> 
</div> 
<div class="total"> 
  <input class="hidden-grand-total" value="80"> 
</div>

Answer 2

Сделал вариант с суммированием значений.

var sum = 0; 
 
$('.total').find('.hidden-grand-total').each(function() { 
      sum = sum + parseInt($(this).val()); 
}); 
 
console.log(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<div class="total"> 
         <input class="hidden-grand-total" value="130"> 
    </div> 
<div class="total"> 
         <input class="hidden-grand-total" value="0"> 
    </div> 
<div class="total"> 
         <input class="hidden-grand-total" value="80"> 
    </div>

Answer 3

var inputGrand = document.querySelectorAll('.hidden-grand-total'); 
var inputGrandSum = 0; 
 
for(var i = 0; i < inputGrand.length; i++){	 
	inputGrandSum += parseFloat(inputGrand[i].value);	 
} 
console.log(inputGrandSum); 
document.querySelector('.result').innerHTML = 'Сумма ' +  inputGrandSum;
<div class="total"> 
    <input class="hidden-grand-total" value="130"> 
</div> 
<div class="total"> 
    <input class="hidden-grand-total" value="0"> 
</div> 
<div class="total"> 
    <input class="hidden-grand-total" value="80"> 
</div> 
 
<div class="result"></div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте hersones.com.ua
ТОП-10
READ ALSO
2 раздельно открываемый ul
javascript

2 раздельно открываемый ul

"Открыть подменю" 2 и их открывать поочередно, при открытие первого закрыть второе, при закрытие второго- открывать первый

 206
All parts of a PRIMARY KEY must be NOT NULL; if you need NULL in a key, use UNIQUE instead [закрыт]
MySQL

All parts of a PRIMARY KEY must be NOT NULL; if you need NULL in a key, use UNIQUE instead [закрыт]

Стоит MySQL(57

 179
Как задать условие Mysql?
MySQL

Как задать условие Mysql?

Мне нужно чтобы при создании новой строки в таблице users,проверялось условие: Если у нового пользователя в столбце 'ref_use' есть какая-то цифра(id...

 184
Сложный запрос SQL (объединение таблиц)
MySQL

Сложный запрос SQL (объединение таблиц)

Есть 3 таблицы:

 162