jQuery -返回和下一个之间的多选择问卷

jQuery - back and next between multi select questionnaire

本文关键字：选择 之间 返回 下一个 jQuery      更新时间：2023-09-26

我必须建立一个多选择问卷，用户可以回到以前的问题和改变答案。

我想确保以下内容(例如):问题2中的用户单击"返回"按钮-我如何显示问题1中选中的答案?

这是创建复选框的代码:

 $.each(multiQ[questionIndex].answers, function(key, val) {
            $('#answers').append('<label><input type="checkbox" class="radio" name="fooby[1][]" value="'+val+'"  onchange="test(this)" >' + val + '</label>');

好吧，我建议你使用HTML5 Web Storage。你可以用它来保存每个问题的答案，然后你可以通过在按钮上给出一个key/value来获得上一个/下一个问题的答案。

下面是一个如何使用LocalStorage的例子: 
// Check browser support
if (typeof(Storage) != "undefined") {
    // Store
    localStorage.setItem("lastname", "Smith");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

创建一个名为questions的对象，并在其中存储问题和问题的答案。

它的结构看起来像这样:

{
    0: {
            text: "Who is the president of USA",
            options: ['Obama','Obama','Obama','Obama'],
            correctOption: 3,
            userAnswer: 2
    },
    1: {
            text: "Who is the president of USA",
            options: ['Obama','Obama','Obama','Obama'],
            correctOption: 3,
            userAnswer: 2
    },
}

并将当前问题号存储在另一个变量中(例如，称为'step')。当用户单击next按钮时，增加step变量并呈现从questions对象中获取的问题(当用户单击back按钮时执行相同操作)。当用户选择答案时，将其写入questions对象以便存储它。这样，您可以轻松地显示问题和用户的答案。

编辑:

我给你做了一个榜样:

http://jsfiddle.net/oxzp88ub/3/

这是一个非常简单的例子，展示了显示问题的基本知识。
相关文章：