保存单选按钮的状态 javascript

Question

我正在使用 javascript 构建多项选择测验，想知道如何保存单选按钮的状态。因此，当用户 returns 访问浏览器时，他们选择的单选按钮将保留到位。这是我正在尝试做的 link。 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

这些是我将单选按钮选择的状态保存在数组中并在用户 refreshed/returned 访问页面时调用它们的步骤。

我创建了两个全局变量。

var UserChoices = [];
var storedAnswers = JSON.parse(localStorage["answers"]);

一个用于将单选按钮选项存储在一个数组中，另一个用于解析在函数 checkAnswer()

中字符串化的存储答案

在 checkAnswer() 中，选中的单选选项被推送到 UserChoices 变量中。在它们存储在 localStorage["answers"] = JSON.stringify(UserChoices);

之后

稍后调用 renderQuestion() 时，选中的无线电选项取自 var storedAnswers 并创建。

这是通过 JSbin link 得到的答案代码。 http://jsbin.com/soyivu/4/edit 在 Js bin 你会看到我做了什么。 JS bin 的一个问题是它不会显示输出，因为 JSON.parse - 我不确定为什么。你可以做的是将 javascript 和 html 代码粘贴到你的编辑器中，看看我做了什么让它工作。您还必须有 jQuery 并调用 $(document).ready(function(){ renderQuestion(); }); 在脚本底部。

保存单选按钮的状态 javascript

Save state of radio buttons javascript

javascript

radio-button