保存单选按钮的状态javascript

问题描述

我正在使用 javascript 构建一个多项选择测验，并想知道如何保存单选按钮的状态.因此，当用户返回浏览器时，他们选择的单选按钮将保持原位.这是我正在尝试做的事情的链接.http://jsbin.com/soyivu/1/edit?html,js,output

I am building a multiple choice quiz with javascript and was wondering how I can save the state of the radio buttons .So when a user returns to the browser their chosen radio buttons will remain in place. Here is a link to what I am trying to do. http://jsbin.com/soyivu/1/edit?html,js,output

这里是脚本中两个最重要的函数:

Here are the two most important functions from the script:

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>";
}

推荐答案

使用 localStorage 正如评论中已经建议的那样，这对您来说是一个很好的起点.

Using the localStorage would be a good starting point for you as already suggested in the comments.

我查看了您的代码，据我了解，您会有几个问题，每个问题只有 1 个正确答案.您可以简单地使用数组来存储 checked 答案.可以合并以下代码片段:

I looked at your code and from what I understand, you'll have a couple of questions with only 1 right answer for each of them. You can simply use an array to store the checked answers. Following code snippet could be incorporated:

 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().要检索答案并适当更新您的复选框，您可以执行以下操作:

localStorage only supports strings and therefore we use JSON.stringify() and JSON.parse(). To retrieve the answers and update your checkboxes appropriately, you could do something like:

var StoredAnswers = JSON.parse(localStorage["answers"]);
//StoredAnswers[0] and so on will have the answers stored for the questions

希望这能帮助您解决问题.

Hope this helps you solve your problem.

这篇关于保存单选按钮的状态javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！