How to check if a radio button is checked?

Question

I am doing out a personality quiz for school, and I want to create an alert if a question was not answered.

This is and example of one of the answers (there are four of these for each 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> 

and this is my 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 created an array to go through all the questions and check is everyone answered. I thought I could do this by checking the all elements with the same name but it doesn't seem to work.

I'm not sure how to check that at least one of the answers is marked.

I would appreciate the help and thank you in advance!

Answer 1

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

Answer 2

First, note that document.getElementsByName returns a collection. You need to loop through the collection to check each button. Here's how I would do it:

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

The issue is in this line:

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

because document.getElementsByName function returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 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> 

Also you can simplify the array creation using Array.from method.

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