如何使用輸入收音機正確驗證表單？

Question

我在驗證函數validate（）方法中的表單時遇到問題。 這行代碼：

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

因為其中一個或兩個條件為假，所以被跳過，但是我不確定哪個條件以及該條件是否適合執行。 我以為radios [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

**針對純JavaScript解決方案進行了編輯。

我得到了從這篇文章中獲取選擇值的功能。

我認為您不需要在此處進行循環，因為您實際上只需要檢查一個值-被檢查無線電的值即可。

此刻，您在所有收音機中循環播放，因此您總是會得到三個錯誤的答案。

**再次編輯以修復一些代碼錯誤。 我已經測試了以下內容，它對我有用。

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