如何通过for循环在JavaScript中选择单选按钮值？

Question

我正在写一个表格进行个性测试。该页面有问题，用户需要为每个答案选择一个答案。该页面不允许用户跳过问题，并会提醒他们回答缺失的问题。表单提交后，页面会显示分数。

我想使用for循环来存储数组中单选按钮的值。它不工作。

下面是HTML代码：

<!-- Form --> 
<form name="quiz" onsubmit="return show()"> 

    <!-- Question 1 --> 
    <p>Question 1</p> 
    <input type="radio" name="q0" value="a"> a 
    <br> 
    <input type="radio" name="q0" value="b"> b 
    <br> 
    <input type="radio" name="q0" value="c"> c 

    <!-- Question 2 --> 

    <!-- Question 3 --> 

    <!-- Question 4 --> 

    <!-- Question 5 --> 
    <p>Question 5</p> 
    <input type="radio" name="q4" value="a"> a 
    <br> 
    <input type="radio" name="q4" value="b"> b 
    <br> 
    <input type="radio" name="q4" value="c"> c 

    <!-- Submit Button --> 
    <input type="submit" value="Show Result"> 

</form> 

这里是我的JavaScript代码：

function show() { 

    var questions = 5; 
    var score = 0; 
    var solution = ["a", "c", "a", "b", "b"]; 
    var answers = []; 

    for (i = 0; i < questions; i++) { 

     answers[i] = document.quiz.eval('q' + i).value; 

     if (answers[i] == null || answers[i] == '') { 
      window.alert("You need to answer question " + (i + 1)); 
      return false; 
     } 

     if (solution[i] == answers[i]) { 
      score++; 
     } 

    } 
    window.alert(score); 
} 

Answer 1

eval是window对象的属性而不是形式，但事实上你并不需要使用它。

解决方案1 ​​。替换

answers[i] = document.quiz.eval('q'+i).value; 

与

var tmp = 'q'+i; 
answers[i] = document.quiz[tmp].value; 

溶液2。与

document.quiz['q'+i].value; 

注意更换

answers[i] = document.quiz.eval('q'+i).value; 

：即使你可以使用eval像你想（使用原型）的方式，它仍然会给予错误，因为在这条线

answers[i] = document.quiz.eval('q'+i).value; 

假设i=0 eval会尝试评估q0（将其视为命名变量），并且在全局范围内没有任何具有该名称的变量

Answer 2

你需要的是一个验证功能。

// Since you mentionned 
// "I'm trying to store the values of radio buttons in an array" 
var answers = []; 

var show = (function(answers) { 
    // evaluate this once and avoid globals 
    var questions = 5, 
     solution = ["a", "c", "a", "b", "b"], 
     form = document.quiz; 

    // and return a validate function 
    return function() { 

     var score = 0, 
      success = solution.every(function(value, i) { 

       // get the value of the form field, notice the brackets 
       var current = answers[i] = form['q' + i].value; 
       if (current === value) { 
        score++; 
       } else if (current == null || current == '') { 
        alert("You need to answer question " + (i + 1)); 
        return false; 
       } 
       return true; 
      }); 
     if (success) alert("Score: " + score); 
     return success; 
    }; 

})(answers); 

重要的部分是document.quiz['q' + i]。请参阅Get Radio Button Value with Javascript。

Answer 3

您需要遍历每个无线电组的每个单选按钮选项以查找检查的输入并获取其值。目前，你只是循环遍历每个组。

在你的开始for循环补充一点：

var radioButtons = document.getElementsByName("q"+i); 
for (var x = 0; x < radioButtons.length; x ++) { 
    if (radioButtons[x].checked) { 
    answers[i] = radioButtons[x].value; 
} 
}