Javascript 如何在“上一步”和“下一步”中保存单选按钮选项

所以我一直在做这个测验。当您单击“后退”按钮时，我能够理解如何保留单选按钮选项，但当您单击“下一步”按钮时，我无法理解如何保留单选按钮选项。一定有比我现在做的更简单的方法。有人能帮忙吗？下面是JavaScript：

var correct = 0; //count of correct answers 
var incorrect = 0; //count of incorrect answers
var questionCount = 0; //count of questions
var answers = [];
var choice;

var allQuestions = [{
  question: "What is Elvis Presley's middle name?",
  choices: ["David", "Aaron", "Eric", "Jack"],
  correctAnswer: 1
}, {
  question: "Who is the singer of the Counting Crows?",
  choices: ["Adam Duritz", "John Adams", "Eric Johnson", "Jack Black"],
  correctAnswer: 0
}, {
  question: "Who is the Queen of Soul?",
  choices: ["Mariah Carey", "Whitney Houston", "Aretha Franklin", "Beyonce"],
  correctAnswer: 2
}, {
  question: "Which famous group was once known as The Quarrymen?",
  choices: ["The Beatles", "The Birds", "The Who", "Led Zeppelin"],
  correctAnswer: 0
}];

var totalQuestions = allQuestions.length; //total number of questions

function loadQuestion(questionCount, choice) { //load the next question
  if (questionCount == totalQuestions) { //if you've answered all questions
    $("#next").hide();
    $("#back").hide();
    $("#score").hide().append(correct + "/" + totalQuestions + " correct!").fadeIn("slow");
    $("#restart").show();
    $("#restart").click(function() {
      location.reload(); //reload page when #restart is clicked
    });
  } else {
    $("#next").show();
    $("#restart").hide();
    $("#quiz").hide().fadeIn("slow");
    $("#quiz").append(allQuestions[questionCount].question + "<br><br>");
    for (var i = 0; i < allQuestions[questionCount].choices.length; i++) {
      if (i == choice) {
        $("#quiz").append("<input type='radio' name='questionChoices' value='" + i + "'checked>" + allQuestions[questionCount].choices[i] + "<br>");
      } else {
        $("#quiz").append("<input type='radio' name='questionChoices' value='" + i + "'>" + allQuestions[questionCount].choices[i] + "<br>");
      }

    }

  }
}

$("#next").click(function() { //on click of next button
  if (!$("input").is(":checked")) { //if nothing is checked
    alert("Please make a selection.");
  } else {
    if ($("input:radio[name=questionChoices]:checked").val() == allQuestions[questionCount].correctAnswer) { //if radio button is correct
      correct++; //increase correct number
      $("#symbols").hide().append("<span style='color: green'>√</span>").fadeIn("slow");
    } else {
      incorrect++; //increase incorrect number
      $("#symbols").hide().append("<span style='color: red'>X</span>").fadeIn("slow");
    }
    answers.push($("input:radio[name=questionChoices]:checked").val());
    questionCount++; //increase questionCount
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount); //run loadQuestion again
  }
});

$("#back").click(function() { //on click of back button
  if (questionCount > 0) {
    $("#symbols").children().last().remove(); //remove last span item
    questionCount--; //decrease questionCount
    choice = answers[answers.length - 1];
    answers.pop();
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount, choice); //run loadQuestion again
  }
});

loadQuestion(questionCount); //initialize the function

var correct=0//正确答案的计数
var=0//错误答案计数
var-count=0//问题数量
var回答=[]；
var选择；
var所有问题=[{
问题：“猫王的中间名是什么？”，
选择：[“大卫”、“亚伦”、“埃里克”、“杰克”]，
正确答案:1
}, {
问题：“谁是数数乌鸦的歌手？”，
选择：[“亚当·杜里茨”、“约翰·亚当斯”、“埃里克·约翰逊”、“杰克·布莱克”]，
正确答案：0
}, {
问题：“谁是灵魂女王？”，
选择：[“玛丽亚·凯莉”、“惠特尼·休斯顿”、“阿瑞莎·富兰克林”、“碧昂丝”]，
正确答案：2
}, {
问题：“哪个著名团体曾被称为采石工人？”，
选择：[“披头士”、“小鸟”、“世界卫生组织”、“齐柏林飞艇乐队”]，
正确答案：0
}];
var totalQuestions=allQuestions.length//问题总数
函数loadQuestion（问题计数，选项）{//加载下一个问题
if（questionCount==totalQuestions）{//如果您已经回答了所有问题
$（“#下一步”）.hide（）；
$（“#背”）.hide（）；
$（“#分数”）.hide（）.append（correct+”/“+totalQuestions+“correct！”）.fadeIn（“慢”）；
$（“#重新启动”）.show（）；
$（“#重新启动”）。单击（函数（）{
location.reload（）；//单击#重新启动时重新加载页面
});
}否则{
$（“#下一步”）.show（）；
$（“#重新启动”）.hide（）；
$（“#测验”）.hide（）.fadeIn（“慢”）；
$（“#测验”）.append（所有问题[questionCount].question+”

”；
对于（var i=0；i”；
}否则{
$（“#测验”）。追加（“+allQuestions[questionCount]。选项[i]+”
”；
}
}
}
}
$（“#下一步”）。单击（函数（）{//单击下一步按钮
如果（！$（“输入”）.is（“：checked”）{//如果未选中任何内容
提醒（“请选择”）；
}否则{
if（$（（“输入：单选[name=questionChoices]：选中”）.val（）==allQuestions[questionCount].correctAnswer）{//如果单选按钮正确
correct++；//增加正确的数字
$（“#符号”）.hide（）.append（“√").法代因（“慢”）；
}否则{
不正确的+++；//增加不正确的数字
$（“#符号”）.hide（）.append（“X”）.fadeIn（“慢”）；
}
answers.push（$（（$）输入：radio[name=questionChoices]：checked”）.val（）；
questionCount++；//增加questionCount
$（“#测验”）.empty（）；//empty#测验div
loadQuestion（questionCount）；//再次运行loadQuestion
}
});
$（“#后退”）。单击（函数（）{//单击后退按钮
如果（问题计数>0）{
$（“#符号”）.children（）.last（）.remove（）；//删除最后一个跨度项
questionCount--；//减少questionCount
选择=答案[answers.length-1]；
答案：pop（）；
$（“#测验”）.empty（）；//empty#测验div
loadQuestion（questionCount，choice）；//再次运行loadQuestion
}
});
loadQuestion（questionCount）；//初始化函数

这里有一个可行的解决方案，尽管我注意到一个bug，它使最终结果显示出5个答案（例如3/5），但我在几次尝试后无法重现该bug，请注意

使用“上一步”按钮删除了在“下一步”按钮上收集的所有信息，因此我将其删除，以便您保留信息。更改了数组中信息的创建方式，使其基于问题编号而不是数组长度。将选择加载到“上一步”按钮上，否则您将永远看不到选择，如果没有cho，则未定义冰展示

$（“#下一步”）。单击（函数（）{//单击下一步按钮
如果（！$（“输入”）.is（“：checked”）{//如果未选中任何内容
提醒（“请选择”）；
}否则{
if（$（（“输入：单选[name=questionChoices]：选中”）.val（）==allQuestions[questionCount].correctAnswer）{//如果单选按钮正确
correct++；//增加正确的数字
$（“#符号”）.hide（）.append（“√（“慢”）；
}否则{
不正确的+++；//增加不正确的数字
$（“#符号”）.hide（）.append（“X”）.fadeIn（“慢”）；
}
警惕（回答[问题计数+1]）；
答案[questionCount]=（$（“输入：收音机[name=questionChoices]：选中”）.val（）；
选择=答案[问题计数+1]；
questionCount++；//增加questionCount
$（“#测验”）.empty（）；//empty#测验div
loadQuestion（questionCount，choice）；//再次运行loadQuestion
}
});
$（“#后退”）。单击（函数（）{//单击后退按钮
如果（问题计数>0）{
$（“#符号”）.children（）.last（）.remove（）；//删除最后一个跨度项
questionCount--；//减少questionCount
选择=答案[问题计数]；
//答案：pop（）；
$（“#测验”）.empty（）；//empty#测验div
loadQuestion（questionCount，choice）；//再次运行loadQuestion
}
});

 $("#next").click(function() { //on click of next button
  if (!$("input").is(":checked")) { //if nothing is checked
    alert("Please make a selection.");
  } else {
    if ($("input:radio[name=questionChoices]:checked").val() == allQuestions[questionCount].correctAnswer) { //if radio button is correct
      correct++; //increase correct number
      $("#symbols").hide().append("<span style='color: green'>√</span>").fadeIn("slow");
    } else {
      incorrect++; //increase incorrect number
      $("#symbols").hide().append("<span style='color: red'>X</span>").fadeIn("slow");
    }
    alert(answers[questionCount+1]);
    answers[questionCount] = ($("input:radio[name=questionChoices]:checked").val());
    choice = answers[questionCount+1];
    questionCount++; //increase questionCount
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount, choice); //run loadQuestion again
  }
});

$("#back").click(function() { //on click of back button
  if (questionCount > 0) {
    $("#symbols").children().last().remove(); //remove last span item
    questionCount--; //decrease questionCount
    choice = answers[questionCount];
    //answers.pop();
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount, choice); //run loadQuestion again
  }
});