Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Определить выбраны ли radio (https://javascript.ru/forum/events/66460-opredelit-vybrany-li-radio.html)

galiog 16.12.2016 05:59

Определить выбраны ли radio
 
Здравстуйте. Столкнулся с такой проблемой:
У меня написан тест из нескольких вопросов. Отвечаешь на один, нажимаешь далее - попадаешь на следующий.
Пример вопросов:
<LI id="1">
<H4>1. Сколько человек будет жить в Вашем доме?</H4>
<input type=radio name='Q1' value="2">2<br/>
<input type=radio name='Q1' value="3">3<br/>
<input type=radio name='Q1' value="4">4<br/>
<input type=radio name='Q1' value="5">5<br/>
<input type=radio name='Q1' value="более 5">более 5<br/>
<input type="button" class="next" value = "Далее->">
</li>
<LI id="2" style="display:none;">
<H4>2. В Вашем доме должна быть детская комната? </H4>
<input type=radio name='Q2' value="да, одна"> да, одна<br/>
<input type=radio name='Q2' value="да, две"> да, две <br/>
<input type=radio name='Q2' value="нет"> нет <br/>
<input type="button" class="prev" value = "<-Назад">
<input type="button" class="next" value = "Далее->">
</li>

В скрипте работает все так:
var one = document.getElementById('1');
var two = document.getElementById('2');

var q1 = document.getElementsByName('Q1');
var q2 = document.getElementsByName('Q2');

var ell = [q1, q2]; //массив вопросов
var arr = [one, two]; // массив li
var a = 0;

$(".next").on("click", function(){
arr[a].style.display = "none";
arr[a+1].style.display = "block";
a++;
})

Надо чтобы по клику сперва проверялось выбран ли radio, и если да, то тогда уже перелистывался вопрос, иначе ошибка.

Попробовал проверять через ell[a].checked, но постоянно вылазит ошибка что элемент не выбран. Голову сломал уже, не могу понять в чем проблема.

laimas 16.12.2016 06:36

По умолчанию сделать выбранные первые в наборах и проверять ничего не надо. А уж если проверять, то:

if($(this).parent().find(':checked').length) ...


Зачем смесь из document.getElementById('1'); и JQ?

PS. Снимается вопрос об именах, нумерация разная, не заметил.

galiog 16.12.2016 06:58

document.getElementById('1') - это id карточек, которые перелистываются на кнопку далее. На каждой карточке свой вопрос, имена radio в котором уже Q1 и т.д.
почему одинаковые имена? у первого вопроса имя Q1 у второго Q2. В конце теста все данные отправляю на почту, получая их в php через post, куда попадает value выбранного radio.

laimas 16.12.2016 07:05

Цитата:

Сообщение от galiog
document.getElementById('1') - это id карточек

Не важно что, у вас используется jQuery, вы код пишите так, что часть document.getElementById, затем из недр возникает JQ и $(".next").on("click")...

Ну так пишите сразу на чем-то

$('#1'), это и есть document.getElementById, только имена начинающиеся с цифры...

Вообще же, в JQ можно получить коллекции сразу, по любому селектору (тоже самое можно сделать и без JQ). Вот только совсем не нужны в данном случае эти коллекции для проверок, и делается все проще, как было показано.

А если первую кнопку в наборах сделать выбранной, то вообще проверки не требуется.

galiog 16.12.2016 07:06

По поводу Вашего ответа: да, он работает, спасибо!
Клиент не хочет чтобы какой-то вариант был выбран по умолчанию, по этому пришлось делать проверку.
$(this).parent().find(':checked').length - т.е. мы берем родителя кнопки нашей на которую нажимаем и ищем есть ли там выбранные элементы? Интересно. Еще раз спасибо за ответ!

laimas 16.12.2016 07:22

Цитата:

Сообщение от galiog
$(this).parent().find(':checked').length - т.е. мы берем родителя кнопки нашей на которую нажимаем и ищем есть ли там выбранные элементы?

Да, у родителя получаем коллекцию кнопок и выбираем в ней выбранную, только в JQ эта запись не содержит явного указания - массив элементов -> цикл -> найти. Поэтому и спрашивалось зачем смесь из document.getElementById и далее, если используется JQ.


Часовой пояс GMT +3, время: 22:24.