Выбор всех входов с одинаковым именем возвращает 1 значение

Question

у меня есть форма с 16 числовыми входами, я написал функцию «щелчка» следующим образом:

$("#continue").click(function (e) {
      var mealOption = $("input[name='option[]']").val();
      console.log(mealOption);
}

Это возвращает только 1 значение, хотя ВСЕ 16 входов используют одно и то же имя: option [], независимо от того, сколько числовых входов я ввожу, будет возвращено только 1 значение, которое является первым значением в списке входов.

Где я ошибся?

Большое спасибо!

Answer 1

Вам нужно перебрать каждый из 16 пунктов.

$("input[name='option[]']").each(function(opt) {
  var mealOption = opt.val();
  console.log(mealOption);
});

$("input[name='option[]']") получает все 16 предметов, но когда вы звоните .val() jQuery выбрал первые предметы (под прикрытием).

Answer 2

Согласно официальному документу jQuery по методу .val():

Получить текущее значение первого элемента в наборе совпадающих элементы или установить значение каждого соответствующего элемента.

Это означает, что когда ваш поисковый запрос DOM возвращает коллекцию, для обработки будет выбран только 1-й элемент.

Но, если у вас есть все элементы <input> в <form>, вы можете использовать .serialize() или .serializeArray():

$('form').on('submit', function (event) {
  event.preventDefault();
  event.stopPropagation();

  const v = $(this).serializeArray();
  $('.values').text(JSON.stringify(v, null, '  '));
});

.values {
  font-family: monospace;
}

  
    
    
    
    get values
  
  input values...

В противном случае вы делаете что-то вроде этого:

$('input[name="option"]').each(function () { console.log($(this).val()); });