Как можно получить значения чек-боксов в одну строку
Добрый день, уважаемые форумчане.
Есть просьба помочь: Форма: <form> <div class="question"> Вопрос 1 <input type="radio" name="q1" value="Вариант 1"> <input type="radio" name="q1" value="Вариант 2"> <input type="radio" name="q1" value="Вариант 3"> </div> <div class="question"> Вопрос 2 <input type="checkbox" name="q2" value="Вариант 1"> <input type="checkbox" name="q2" value="Вариант 2"> <input type="checkbox" name="q2" value="Вариант 3"> <input type="checkbox" name="q2" value="Вариант 4"> </div> </form> var form = $(form).serializeArray(); В консоли вижу:
{name: "q1", value: "Вариант 1"}
{name: "q2", value: "Вариант 3"}
{name: "q2", value: "Вариант 4"}
Вопрос: как можно получить результаты для чекбокса в "одну строчку", вот так:
{name: "q1", value: "Вариант 1"}
{name: "q2", value: "Вариант 3, Вариант 4"}
|
busik,
проверку на checked, попробуйте добавить сами.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<div class="question">
Вопрос 1
<input type="radio" name="q1" value="Вариант 1" checked="checked">
<input type="radio" name="q1" value="Вариант 2">
<input type="radio" name="q1" value="Вариант 3">
</div>
<div class="question">
Вопрос 2
<input type="checkbox" name="q2" value="Вариант 1">
<input type="checkbox" name="q2" value="Вариант 2">
<input type="checkbox" name="q2" value="Вариант 3" checked="checked">
<input type="checkbox" name="q2" value="Вариант 4" checked="checked">
</div>
<script>
const data = Array.from(document.querySelectorAll('.question'), div => {
const checked = div.querySelectorAll(':checked');
return {name: checked[0].name , value: Array.from(checked, ({value}) => value).join(',')}
})
document.write(JSON.stringify(data, "", 4))
</script>
</form>
</body>
</html>
|
busik, а цель иметь в одну строку, ради просмотра в консоли?
|
Цитата:
Задача стоит в необходимости получить массив: Вопрос 1 - ответ1 Вопрос 2 - ответ 3, ответ 4 а у меня пока получается только вида: Вопрос 1 - ответ1 Вопрос 2 - ответ 3 Вопрос 2 - ответ 4 |
А чем не подходит структура, которую вы наблюдаете после serializeArray(), это ведь массив и есть, объектов.
PS. Одно и тоже имя радио кнопки, это необходимость, а вот у флажков одно и тоже имя уже баг. |
ну в одну строчку, значит в одну строчку
console.log('Вопрос 2:',[...document.querySelectorAll('input[type=checkbox]')].filter(item=>item.checked===true).map((item)=>item.value).join(', '))
для "Вопрос 1" сами похожую задачка решают здесь на 12:20, дальше filter, map... https://www.youtube.com/watch?v=SGeQ...zOzWT&index=15 рекомендую подписаться и посмотреть весь плейлист |
детально
получаем элементы, общий параметр у них type (или по name можно было, если смотреть на пример, но...)
document.querySelectorAll('input[type=checkbox]
разворачивает и заносим в массив
[...document.querySelectorAll('input[type=checkbox]')]
отбираем по условия, а именно то что выбнали мы [......].filter(item=>item.checked===true) преобразуем к читабельному виду [......].filter(item=>item.checked===true).map((item)=>item.value) вытаскиваем из массива и записываем в строку
[......].filter(item=>item.checked===true).map((item)=>item.value).join(', ')
|
Цитата:
|
| Часовой пояс GMT +3, время: 02:31. |