Как правильно проверить форму с помощью входных радиостанций?

Question

У меня проблема с проверкой формы в методе validate() функции. Эта строка кода:

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

в настоящее время пропускается, потому что один или оба условия ложны, но я не уверен, какой из них и так же, как если условие является правильным для выполнения. Я думал, что радио [i] .value == «yes» будет соответствовать атрибуту value этого входного переключателя (другими словами, правильный ответ на этот вопрос).

Когда нажата кнопка отправки, я просто хочу, чтобы javascript сообщил мне, правильно это или нет, и проверить, установлен ли переключатель.

Проблема: я проверил переключатель, когда кнопка отправки нажата на предупреждение. Пожалуйста, убедитесь, что вы отвечаете на каждый вопрос, появляется 3 раза и после этого показывает, что у меня правильный ответ.

Вот полный код:

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 код:

<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

** Отредактировано для чистого яваскрипта раствора.

Я получил функцию, чтобы получить значение выбора от this post.

Я не думаю, что вам нужно сделать петлю здесь, так как вам действительно нужно проверить только одно значение - значение проверенного радио.

В настоящий момент вы перебираете все радиостанции, поэтому вы всегда получите три неправильных ответа.

** Отредактировано снова, чтобы исправить некоторые ошибки кода. Я проверил следующее, он работает для меня.

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