Javascript 如何将选中的单选按钮与特定的数组值进行比较？
JavaScript和jQuery初学者请温柔一点 我正在尝试制作我的第一个JavaScript/jQuery应用程序——一个简单的测验，有三个问题，只有一个按钮，最后输出一个最终分数。除了单选按钮外，我什么都做不好。无法确定如何查看选中的单选按钮是否为下面初始数组中的正确答案“correctAnswer”。如果有任何帮助，我将不胜感激 quick.JSJavascript 如何将选中的单选按钮与特定的数组值进行比较？,javascript,jquery,arrays,forms,Javascript,Jquery,Arrays,Forms,JavaScript和jQuery初学者请温柔一点 我正在尝试制作我的第一个JavaScript/jQuery应用程序——一个简单的测验，有三个问题，只有一个按钮，最后输出一个最终分数。除了单选按钮外，我什么都做不好。无法确定如何查看选中的单选按钮是否为下面初始数组中的正确答案“correctAnswer”。如果有任何帮助，我将不胜感激 quick.JS $(document).ready(function(){ var allQuestions = [ {question: "1: Who
$(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>
<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>
您可以为输入设置数据id属性，并检查所选输入数据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
}
完整代码：如果我可以提供一个建议，我认为最好将每个无线电输入的相关文本存储为其“value”属性，而不是“name”属性。一组答案中的每个无线电输入应具有相同的“名称”属性-这将允许用户从组中仅选择一个答案。太好了，我明白你的意思，谢谢。但是，当我运行代码时，如果一个正确，那么分数是正确的，如果两个正确，那么分数是正确的，但是如果三个正确，那么分数永远不会正确。我一定在什么地方遇到了反问题……有效！非常感谢！这也帮助我更好地理解了这个概念。