Question

我正在使用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>";
}

Answer 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

希望这可以帮助您解决问题。

Answer 2

这是我在数组中保存单选按钮选项状态所做的步骤，并在用户刷新/返回页面时调用它们。

我创建了两个全局变量。

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(); }); 在脚本的底部。

保存单选按钮javascript的状态

2 个答案: