Задать вопрос
@kesh_mir
javascript

Почему чекбокс и радио undefined?

Всем привет! Есть форма, в которой нужно заносить значения из input в массив.
Проблема в том, что когда использую each, то текстовый инпут заносится нормально, а радио и чекбокс всегда undefined.
Но если их просто вынести за each, то они отображаются нормально. Что за хрень такая? :)
Прикладываю код, всем заранее спасибо за ответы! 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
</head>
<body>
	

	<form>
		<div class="item">
			<input class='text' type="text" placeholder="Текстовое поле" value='Текстовое поле'>
		</div>
		<div class="item">
			<input class='checkbox-checked checkbox' type="checkbox" name='checkbox' value='чекбокс1'>
			<input class='checkbox' type="checkbox" name='checkbox' value='чекбокс2'>
		</div>
		<div class="item">
			<input class='radio-checked radio' type="radio" name='radio' value='радио-кнопка1'>
			<input class='radio' type="radio" name='radio' value='радио-кнопка2'>
		</div>		


	</form>


<script>

			var array = [];

			$('.item').each(function(){
			var th = $(this);
			var text = th.find('.text').val();
			var radio = th.find('.radio-checked').val();
			var checkbox = th.find('.checkbox-checked').val();
				if (text != '') {
					array.push(text);
				}
				else if (radio  != '') {
					array.push(radio);
				} else if (checkbox  != '') {
					array.push(checkbox);
				}
					
	
				});

			console.log(array);

			var textVal = $('.item .text').val();
			var radioVal = $('.item .radio-checked').val();
			var checkboxVal = $('.item .checkbox-checked').val();

			console.log(textVal);
			console.log(radioVal);
			console.log(checkboxVal);
</script>
</body>
</html>
  • Вопрос задан
  • 263 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Libiros
@Libiros
Frontend developer
Вот вариант без JQuery. Я дописал в Ваш HTML сразу после /form кнопку, по которой получаем результат.

<button id="result">result</button>

(function () {

  var item = document.getElementsByClassName("item"),
      input;

  var itemLength = item.length;

  // Эту функцию повесим на кнопку. При клике будем вызывать. Функция создаст массив arr, куда будет записывать необходимые данные.
  var getResult = function () {
    var arr = [];
    
    // В каждом .item...
    for (var i = 0; i < itemLength; i++) {
      input = item[i].getElementsByTagName("input");
      var inputLength = input.length;

      // Возьмем все input'ы в каждом взятом .item
      for (var j = 0; j < input.length; j++) {

        // Если наш инпут является чекбоксом или радио, то проверим на то, чекнут он или нет и запишем значение в массив
        if (input[j].type === "checkbox" || input[j].type === "radio") {
          if (input[j].checked) {
            arr.push(input[j].value);
          }
        // Это для всех не_чекбоксов и не_радио
        } else {
          arr.push(input[j].value);
        }
      }
    }
    
    // Надо же посмотреть на массив, да?
    console.log(arr);
  
  }

  var result = document.getElementById("result");
  result.addEventListener("click", getResult, false);

})();
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 2
@Samarkand
Вместо val() используй prop('checked')
Ответ написан
Комментировать
Комментировать
roamn
@roamn
Front-end developer
Здравствуйте.
Получение состояния переключателей.

$('.item .radio-checked').prop('checked');
$('.item .checkbox-checked').prop('checked');
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Деплой приложения
24 нояб. 2024, в 16:14
1000 руб./за проект
Написать запросный бот парсер поиска с функцией автоматической записи
24 нояб. 2024, в 15:21
120000 руб./за проект
Дизайн интерфейса веб-приложения
24 нояб. 2024, в 14:37
3000 руб./в час
Ещё заказы