Форум

busik · #1 (**permalink**) 06.05.2020, 19:46

Добрый день, уважаемые форумчане.
Есть просьба помочь:

Форма:

<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"}

рони · #2 (**permalink**) 06.05.2020, 20:03

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>

laimas · #3 (**permalink**) 06.05.2020, 20:11

busik, а цель иметь в одну строку, ради просмотра в консоли?

busik · #4 (**permalink**) 06.05.2020, 20:21

Сообщение от laimas

busik, а цель иметь в одну строку, ради просмотра в консоли?

пример про консоль я навел для наглядности. Возможно не совсем удачно)

Задача стоит в необходимости получить массив:

Вопрос 1 - ответ1
Вопрос 2 - ответ 3, ответ 4

а у меня пока получается только вида:

Вопрос 1 - ответ1
Вопрос 2 - ответ 3
Вопрос 2 - ответ 4

laimas · #5 (**permalink**) 06.05.2020, 20:26

А чем не подходит структура, которую вы наблюдаете после serializeArray(), это ведь массив и есть, объектов.

PS. Одно и тоже имя радио кнопки, это необходимость, а вот у флажков одно и тоже имя уже баг.

od0201 · #6 (**permalink**) 07.05.2020, 22:12

ну в одну строчку, значит в одну строчку

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

рекомендую подписаться и посмотреть весь плейлист

od0201 · #7 (**permalink**) 07.05.2020, 22:18

детально
получаем элементы, общий параметр у них 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(', ')

busik · #8 (**permalink**) 08.05.2020, 00:22

Сообщение от od0201

детально
получаем элементы, общий параметр у них 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(', ')

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript