如何使用输入收音机正确验证表单？

Question

I have a problem with validating the form in function validate() method. This line of code:

if(radios[i].value == "yes" && radios[i].checked == true) //DEBUG INFO: skips this step to else.

is being skipped because one or both of the conditions are false, but I'm not sure which one and as well as if the condition is proper to execute. I was thinking that radios[i].value == "yes" will correspond to the value attribute of that input radio button (In other words, the correct answer regarding that question).

When the submit button is clicked, I simply want javascript to tell me whether it's correct or not and to check if the radio button is checked.

Problem: I checked in the radio button, when submit button is clicked the alert for Please make sure you answer every question pops up 3 times and after that displays that I have the correct answer.

Here's the full code:

JavaScript:

// called when "Take Quiz" button is clicked
function takeQuiz()
{
// hide the intro
document.getElementById('intro').style.display = 'none';

// display the quiz
document.getElementById('message').style.overflow = 'auto';
document.getElementById('quiz').style.visibility = 'visible';
document.getElementById('gl_banner').style.display = 'block';
document.getElementById('gl_banner').style.visibility = 'visible';
}

//document.getElementById('submit').onclick = validateQuiz; //calls the function "validateQuiz" when submit button is clicked
// check for validation in the quiz
function validateQuiz()
{
var radios; // access elements by object name (DOM)
var i; // int variable
var right; // boolean variable to determine correct answer

radios = document.getElementById('question1').getElementsByTagName('input');
/*radios = document.getElementById('question2').getElementsByTagName('input');
radios = document.getElementById('question3').getElementsByTagName('input');
radios = document.getElementById('question4').getElementsByTagName('input');
radios = document.getElementById('question5').getElementsByTagName('input');*/

right = true;

// loop to check each radio button for validation
for(i = 0; i < radios.length; i++)
{
    if(radios[i].value == "yes" && radios[i].checked == true) //DEBUG INFO: skips this step to else.
    {
        right = true;
    }
    else if(radios[i].checked == false)
    {
        right = false;
        alert("Please check to make sure you have answered every question.");

    }
}

if(right)
{
    alert("You have answered correctly!");
}
else
{
    alert("Wrong answer");
}
}

HTML Code:

<div id="message" style="overflow:hidden;"><div id="intro">Why not go ahead and take the quiz to test your knowledge based on what you've learned in Smartphone Photography.
            There are only 5 questions surrounding the content of this site.
            <br/>
            <button id="takeQuiz" type="button" name="name" onclick="takeQuiz()" style="cursor:pointer;">Take Quiz!</button></div>
            <div id="gl_banner" style="display:none; visibility:hidden;">Good Luck! :)</div>
                <form id="quiz" action="#" method="post" style="visibility:hidden;" autocomplete="off">
                    <!--QUIZ-->
                    <h3>1. How many percent of modern camera phones use CMOS?</h3>
                    <div id="question1">
                        <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
                        <label for="question-1-answers-A">A) 20%</label>
                        <br/>
                        <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
                        <label for="question-1-answers-B">B) 80%</label>
                        <br/>
                        <input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
                        <label for="question-1-answers-C">C) 50%</label>
                        <br/>
                        <input type="radio" name="question-1-answers" id="question-1-answers-D" value="yes" />
                        <label for="question-1-answers-D">D) 90%</label>
                    </div>

Answer 1

**Edited for a pure javascript solution.

I got the function to get the select value from this post .

I don't think you need to do a loop here, as you only actually need to check one value- the value of the checked radio.

At the moment your looping through all the radios, so you'll always get three wrong answers.

**Edited again to fix some code errors. I have tested the following, it is working for me.

function getRadioValue(name) {
var group = document.getElementsByName(name);

for (var i=0;i<group.length;i++) {
    if (group[i].checked) {
    return group[i].value;
    }
}

return '';
}

document.getElementById('submit').onclick = validateQuiz; //calls the function         "validateQuiz" when submit button is clicked

// check for validation in the quiz
function validateQuiz(){

right = true;
radio = getRadioValue("question-1-answers");

if(!radio.length) {
    right = false;
    alert("Please check to make sure you have answered every question.");
    return;
    }
if(radio == 'yes')
   {
    alert("You have answered correctly!");
}
else {
    right = false;
    alert("Wrong answer");
    }
}