我正在使用javascript构建一个多项选择测验,并想知道如何保存单选按钮的状态。因此,当用户返回浏览器时,他们选择的单选按钮将保持不变。这是我想要做的事情的链接。 http://jsbin.com/soyivu/1/edit?html,js,output
以下是脚本中最重要的两个函数:
function checkAnswer(){
choices = document.getElementsByName("choices");
if ($('input[name=choices]:checked').length > 0) {
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
if(choice == allQuestions[pos]["correctAnswer"]){
correct++;
}
pos++;
renderQuestion();
} else {
alert("Select Something");
}
}
function renderQuestion(){
test = _("test");
if(pos >= allQuestions.length){
test.innerHTML = "<h2>You got "+correct+" of "+allQuestions.length+" questions correct</h2>";
_("test_status").innerHTML = "Test Completed";
pos = 0;
correct = 0;
return false;
}
_("test_status").innerHTML = "Question "+(pos+1)+" of "+allQuestions.length;
question = allQuestions[pos]["question"];
chA = allQuestions[pos]["choices"][0];
chB = allQuestions[pos]["choices"][1];
chC = allQuestions[pos]["choices"][2];
test.innerHTML = "<h2>"+question+"</h2>";
test.innerHTML += "<input type='radio' name='choices' value='0'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='1'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='2'> "+chC+"<br><br>";
test.innerHTML += "<button onclick='goBack()'>Prev</button>";
test.innerHTML += "<button onclick='checkAnswer()'>Next</button>";
}
答案 0 :(得分:1)
使用localStorage对您来说是一个很好的起点,正如评论中已经建议的那样。
我看了你的代码,根据我的理解,你会有几个问题,每个问题只有1个正确的答案。您只需使用数组来存储checked
个答案。以下代码段可以合并:
var UserAnswers = [];
//In your code where you get a handle on the checked radio button, simply do
choice = choices[i].value; //I'm assuming here is where you get the value
UserAnswers.push(choice);
//Once you do this for all the questions, just do
localStorage["answers"] = JSON.stringify(UserAnswers);
localStorage
仅支持字符串,因此我们使用JSON.stringify()
和JSON.parse()
。要检索答案并相应地更新复选框,您可以执行以下操作:
var StoredAnswers = JSON.parse(localStorage["answers"]);
//StoredAnswers[0] and so on will have the answers stored for the questions
希望这可以帮助您解决问题。
答案 1 :(得分:0)
这是我在数组中保存单选按钮选项状态所做的步骤,并在用户刷新/返回页面时调用它们。
我创建了两个全局变量。
var UserChoices = [];
var storedAnswers = JSON.parse(localStorage["answers"]);
一个用于存储数组中的单选按钮选项,另一个用于解析存储的答案,这些答案在函数checkAnswer()
在checkAnswer()
中,已检查的无线电选项被推入UserChoices
变量。将它们存储在localStorage["answers"] = JSON.stringify(UserChoices);
稍后调用renderQuestion()
时,已检查的广播选项将从var storedAnswers
中获取并创建。
这是通过JSbin链接的答案代码。 http://jsbin.com/soyivu/4/edit
在Js bin你会看到我做了什么。 JS bin的一个问题是它不会因为JSON.parse而显示输出 - 我不知道为什么。你可以做的是将javascript和html代码粘贴到你的编辑器中,看看我做了什么让它工作。您还必须拥有jQuery并致电$(document).ready(function(){
renderQuestion();
});
在脚本的底部。