如何将选中的单选按钮与特定的数组值进行比较？答案

【问题标题】：How to compare checked radio button to specific array value?如何将选中的单选按钮与特定的数组值进行比较？
【发布时间】：2014-03-29 18:45:36
【问题描述】：

（JavaScript 和 jQuery 初学者--请温柔。）

我正在尝试制作我的第一个 JavaScript/jQuery 应用程序——一个包含三个问题的简单测验，只有一个按钮，最后会输出最终分数。除了单选按钮检查外，我什么都有——难住了。无法弄清楚如何查看选中的单选按钮是否是正确答案（下面初始数组中的“正确答案”）。如有任何帮助，将不胜感激。

QUIZ.JS

$(document).ready(function(){

var allQuestions = [
{question: "1: Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer:0},
{question: "2: What is Barack Obama's middle name?", choices: ["Liberal", "Hussein", "Osama", "Joseph"], correctAnswer:1},
{question: "3: Who was President during the Civil War?", choices: ["Harry Truman", "John Tyler", "Abraham Lincoln", "John Adams"], correctAnswer:2}
];

var i = 0; //keep track of which question we're displaying.
var numCorrect = 0; // keep track of the number of correct answers.


    $("button").on('click',function(){  //when the button is clicked,

         // display the next question and all the possible answers...
         if (i < allQuestions.length) //if the question counter is less than the length of the array of answers...
           {
            $('#question').remove();  //remove the current question...
            $('.answerlist').remove();  //and remove the current list of answers...
            $('#questionhead').after('<p id="question">' + allQuestions[i]['question'] + '</p>'); //display the current question
            $('#answerhead').after("<form id='answerform'>");

            // display all the answers for the current question
            for (q=0; q < allQuestions[i]['choices'].length; q++){
               $('#answerform').after("<div class='answerlist'> <input type='radio' name='" +  allQuestions[i]['choices'][q]  +  "'>" + allQuestions[i]['choices'][q] + '<br /></div>');
               }
            $('button').before("</form>");

           i += 1;

           } else {
           $('#questionhead').remove();
           $('#answerhead').remove();
           $('#question').remove();  //remove the current question...
           $('.answerlist').remove();  //and remove the current list of answers...
           $('button').before('<h3>Final score:</h3> You got ' + numCorrect + ' out of 3 questions correct.');
           $('button').remove();
            }
    });

});

还有 HTML 页面：

<html>

  <head>

    </head>

 <body>
<h1>JavaScript Quiz</h1>
<hr>


<h2 id = "questionhead">Question</h2>

<h2 id="answerhead">Answer</h2>

<p></p>
<button type = "button">Next Question</button>

<!-- Best practice: Load javascript file and jQuery at bottom of page, just before <body> tag. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="quiz.js"></script>



</body>

</html>

这是 jsfiddle： http://jsfiddle.net/9pjW6/

【问题讨论】：

如果我可以提供一个建议，我认为将每个无线电输入的关联文本存储为它的“值”属性而不是它的“名称”属性会更好。一组答案中的每个单选输入都应具有相同的“名称”属性 - 这将允许用户从组中仅选择一个答案。

标签： javascript jquery arrays forms

【解决方案1】：

您可以将 data-id 属性添加到您的输入中，并检查所选输入 data-id 是否与您的正确答案编号匹配。比如：

$("button").on('click',function(){

       if($("input:checked").length){
           if($("input:checked").attr("data-id")==allQuestions[i-1].correctAnswer){
               numCorrect+=1;
           }
       }

if (i < allQuestions.length) {

 //etc
for (q=0; q < allQuestions[i]['choices'].length; q++){
               $('#answerform').after("<div  class='answerlist'> <input data-id='"+q+"' type='radio' name='" +  allQuestions[i]['choices'][q]  +  "'>" + allQuestions[i]['choices'][q] + '<br /></div>');
 }
//etc

}

完整代码：http://jsfiddle.net/6TUYM/2/

【讨论】：

太好了——我明白你的意思了，谢谢。但是，当我运行您的代码时，如果一个是正确的，如果两个是正确的，则分数是正确的——但如果三个是正确的，则永远不会。我一定在某个地方遇到了柜台问题……
有效！非常感谢！这也帮助我更好地理解了这个概念。