Как проверить, установлен ли переключатель?

Question

Я провожу тест на личность для школы и хочу создать оповещение, если на вопрос не ответили.

Это и пример одного из ответов (их четыре на каждый вопрос)

<div class="choice"><label class="input"><input type="radio" name="colour" value="-1"/><span class="marked"></span></label><img src="images/2.jpg" alt="Gothic colour palette"></div> 

, и это мой javascript:

var y = new Array(5);
y[0] = document.getElementsByName("color"):checked;
y[1] = document.getElementsByName("pattern"):checked;
y[2] = document.getElementsByName("store"):checked;
y[3] = document.getElementsByName("hat"):checked;
y[4] = document.getElementsByName("hair"):checked;

var i;
for (i=0; i < x.length; i++){
    if (y[i] == false){
        alert("You didn't answer all the questions!");
    }
}

Iсоздал массив, чтобы пройти все вопросы и проверить, все ли ответили.Я думал, что смогу сделать это, проверив все элементы с одинаковыми именами, но, похоже, это не сработает.

Я не уверен, как проверить, отмечен ли хотя бы один из ответов.

Буду признателен за помощь и заранее спасибо!

Answer 1

Проблема заключается в этой строке:

y[0] = document.getElementsByName("color")

, поскольку функция document.getElementsByName возвращает коллекцию всех элементов в документе с указанным именем (значением атрибута name) в виде NodeList объект.

Объект NodeList представляет коллекцию узлов.Доступ к узлам осуществляется по номерам индексов.Индекс начинается с 0.

var y = new Array(5);
y[0] = document.getElementsByName("colour")[0].checked;

var i;
for (i=0; i < 1; i++){
    if (y[i] == false){
        alert("You didn't answer all the questions!");
    }
}

<div class="choice"><label class="input"><input type="radio" name="colour" checked value="-1"/><span class="marked"></span></label><img src="images/2.jpg" alt="Gothic colour palette"></div>

Также вы можете упростить создание массива, используя метод Array.from.

y = Array.from(document.querySelectorAll('input[type=radio]')).map(elem => elem.checked);

Answer 2

Во-первых, обратите внимание, что document.getElementsByName возвращает коллекцию. Вам нужно пройтись по коллекции, чтобы проверить каждую кнопку. Вот как бы я это сделал:

var nameList = ['color', 'pattern', 'store', 'hat', 'hair'];
for(var i = 0; i < nameList.length; i++) {
    var isOneSelected = false;
    var radioButtons = document.getElementsByName(nameList[i]);
    for(var j = 0; j < radioButtons.length; j++) {
        if(radioButtons[j].checked == true) {
            isOneSelected = true;
            break;
        }
    }
    if(!isOneSelected) {
        alert("You must provide an answer for " + nameList[i]);
        break;
    }
}

Answer 3

var i;
for (i=0; i < x.length; i++){
    if (!y[i].checked){
        alert("You didn't answer all the questions!");
    }
}