Javascript JQuery：选中/取消选中单选按钮

我试图找出我脚本中的错误，希望有人能告诉我哪里出了错。这是一个基于JS/Jquery（JavaScriptisExy练习）创建测验的尝试

到目前为止，它工作得很好，除了：我想使用一个后退按钮来回忆用户之前给出的答案，并相应地设置单选按钮。脚本不会返回，即使我单击“前进”，它也不会给我任何错误，帮助我找出问题所在

再次，我真的很抱歉，我不能把范围缩小，因为我真的不知道哪些部分是相关的/不相关的。如果有人对如何更好地呈现那些“我几乎要放弃了，因为我不知道如何找出问题所在”的问题有一些建议，我很乐意这样做

HTML单选按钮的结构如下所示：

 <input type="radio" name="radio" id="Option0" value="Option0" />
 <label for ="Option0">Option0</label>

选项0

JS/Jquery：

 $(document).ready(function () {
 var allQuestions = [
    {question: "Who is Prime Minister of the United Kingdom?",
        choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
        correctAnswer: 0},
    {question: "Which color has the sky?",
        choices: ["Grey", "Black", "Blue", "Green"],
        correctAnswer: 2},
    {question: "What's on the chain?",
        choices: ["Monster", "Magician", "Bull", "Skull"],
        correctAnswer: 3}
];

var counter = 0;     // Question No currently processed
var points = 0;        // Total points currently reached by the player
var answers = new Array(); // Array of the choices the player made  eg Q1:0

// Back button in a function
function back() {
    if (counter > 0)          //Checks if there is at least one question already answered
    {
        //Goes back one question

        $("#back").show().on('click', function () {
            counter = counter--;
            quiz();
        });      //Executes quiz loading

    }
    else {
        $("#back").hide();         //If there is no previous question existing the back button is deactivated
    }
}


function qload(counter) {
    $("title").text("Question No ");
    $("#question").text(allQuestions[counter].question);
    back();
    for (var i = 0; i < allQuestions[counter].choices.length; i++) {
        $('label[for=Option' + i + ']').html(allQuestions[counter].choices[i]);

        if (answers["Q" + i]) {
            $("#Option" + i).attr("checked","checked");
        }

        else {
            $("#Option" + i).removeAttr('checked');
        }
    }
};
//this is the result screen giving the final amount of points
function result() {
    $("title").text("Your Results");
    for (var i = 0; i < allQuestions.length; i++) {
        if (allQuestions[i].correctAnswer == answers["Q" + i]) {
            points++;
        }


        $("#result").show().text("CONGRATULATIONS! You answered " + points + " out of " + allQuestions.length + " correct!");
        $(".qbox").hide();
        console.log(answers);

    }
}

function welcome() {
    // this is the welcome screen inviting to start the quizz
    $("title").text("Welcome to the JQuery QuizY");
    $(".qbox").hide();
    $("#result").append().html("Random");
    $("#result").append().html("<p id='start'>Start</p>");
    $("#start").on('click', function () {
        quiz();
    });
}

function quiz() {
    $("#start, #result").hide();
    $(".qbox").show();
    qload(counter);
    $("#next").on('click', function () {
        // this checks that one question is selected before processing
        if ($('#Option0').is(':checked')) {
            answers["Q" + counter] = 0;
            counter++;
        }

        else if ($('#Option1').is(':checked')) {
            answers["Q" + counter] = 1;
            counter++;
        }

        else if ($('#Option2').is(':checked')) {
            answers["Q" + counter] = 2;
            counter++;
        }

        else if ($('#Option3').is(':checked')) {
            answers["Q" + counter] = 3;
            counter++;
        }

        else {
            alert("Please make your selection before continuing!");
        }

        // this checks if there are any questions left, otherwise it goes to the result screen
        if (allQuestions[counter]) {
            qload(counter);
        }
        else {
            result();
        }
    });
}

welcome();

});

$（文档）.ready（函数（）{
var所有问题=[
{问题：“谁是联合王国首相？”，
选择：[“大卫·卡梅伦”、“戈登·布朗”、“温斯顿·丘吉尔”、“托尼·布莱尔”]，
正确答案：0}，
{问题：“天空是什么颜色的？”，
选项：[“灰色”、“黑色”、“蓝色”、“绿色”]，
正确答案：2}，
{问题：“链条上有什么？”，
选择：[“怪物”、“魔术师”、“公牛”、“骷髅”]，
正确答案：3}
];
var counter=0；//当前未处理问题
var points=0；//玩家当前达到的总分
var answers=new Array（）；//玩家所做选择的数组，如Q1:0
//函数中的后退按钮
函数back（）{
if（counter>0）//检查是否至少已经回答了一个问题
{
//回到一个问题
$（“#返回”）.show（）.on（'单击'，函数（）{
计数器=计数器--；
测验（）；
})；//执行测验加载
}
否则{
$（“#后退”）.hide（）；//如果前面没有问题，则“后退”按钮将停用
}
}
函数qload（计数器）{
$（“标题”）。文本（“问题编号”）；
$（“#问题”）.text（所有问题[counter].question）；
背（）；
对于（var i=0；istart
”）；
$（“#开始”）。在（'click'，函数（）{
测验（）；
});
}
函数测验（）{
$（“#开始，#结果”）.hide（）；
$（“.qbox”）.show（）；
qload（计数器）；
$（“#下一步”）。在（'单击'，函数（）{
//这将检查在处理前是否选择了一个问题
如果（$（'#Option0'）。是（':checked'））{
答案[“Q”+计数器]=0；
计数器++；
}
else if（$（'Option1'）。为（'：选中'））{
答案[“Q”+计数器]=1；
计数器++；
}
如果（$（“#Option2”）。为（“：选中”），则为else{
答案[“Q”+计数器]=2；
计数器++；
}
如果（$（“#Option3”）是（“：选中”），则为else{
答案[“Q”+计数器]=3；
计数器++；
}
否则{
警告（“请在继续之前进行选择！”）；
}
//这将检查是否还有任何问题，否则将进入结果屏幕
如果（所有问题[计数器]）{
qload（计数器）；
}
否则{
结果（）；
}
});
}
欢迎（）；
});

1）不能使用字符串作为索引（answers[“Q”+i]）引用数组元素。您必须使用数字作为数组索引，或者使用对象而不是数组

2） 不要使用.attr（）方法修改DOM属性，例如“checked”。改用这个方法。因此，您必须替换此代码段：

if (answers["Q" + i]) {
    $("#Option" + i).attr("checked","checked");
}

else {
    $("#Option" + i).removeAttr('checked');
}

以下是：

$("#Option" + i).prop("checked", Boolean(answers["Q" + i]));

var oEl = $('input:radio[name=radio]:checked');
if (oEl.length) {
    answers[counter] = parseInt(oEl.val());
    counter++;
}
else {
    alert("Please make your selection before continuing!");
}

3） 您获取用户答案价值的方法非常繁琐，但也很奇怪。 此代码：

    if ($('#Option0').is(':checked')) {
        answers["Q" + counter] = 0;
        counter++;
    }

    else if ($('#Option1').is(':checked')) {
        answers["Q" + counter] = 1;
        counter++;
    }

    else if ($('#Option2').is(':checked')) {
        answers["Q" + counter] = 2;
        counter++;
    }

    else if ($('#Option3').is(':checked')) {
        answers["Q" + counter] = 3;
        counter++;
    }

    else {
        alert("Please make your selection before continuing!");
    }

可替换为以下内容：

$("#Option" + i).prop("checked", Boolean(answers["Q" + i]));

var oEl = $('input:radio[name=radio]:checked');
if (oEl.length) {
    answers[counter] = parseInt(oEl.val());
    counter++;
}
else {
    alert("Please make your selection before continuing!");
}

此外，还需要修复单选按钮的html代码：

<input type="radio" name="radio" id="Option0" value="0" />
<label for ="Option0">Option0</label>

选项0

再加上一些其他的变化

因此，总体代码更新：

$(document).ready(function () {
var allQuestions = [
    {question: "Who is Prime Minister of the United Kingdom?",
        choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
        correctAnswer: 0},
    {question: "Which color has the sky?",
        choices: ["Grey", "Black", "Blue", "Green"],
        correctAnswer: 2},
    {question: "What's on the chain?",
        choices: ["Monster", "Magician", "Bull", "Skull"],
        correctAnswer: 3}
];

var counter = 0; // Question No. currently processed
var answers = new Array(); // Array of the choices the player made

$('#back').click(function(){
    counter++;
    quiz();
});

// update Back button appearance
function updateBackBtn() {
    if (counter > 0)
        $("#back").show();
    else
        $("#back").hide();
}

// set current question
function qload(counter) {
    $("title").text("Question No ");
    $("#question").text(allQuestions[counter].question);
    updateBackBtn();
    for (var i = 0; i < allQuestions[counter].choices.length; i++) {
        $('label[for=Option' + i + ']').html(allQuestions[counter].choices[i]);

        $("#Option" + i).prop("checked", Boolean(answers[i]));
    }
};

// this is the result screen giving the final amount of points
function result() {
    $("title").text("Your Results");
        var points = 0; // Total points currently reached by the player
    for (var i = 0; i < allQuestions.length; i++) {
        if (allQuestions[i].correctAnswer == answers[i]) {
            points++;
        }
        $("#result").show().text("CONGRATULATIONS! You answered " + points + " out of " + allQuestions.length + " correct!");
        $(".qbox").hide();
        console.log(answers);

    }
}

function welcome() {
    // this is the welcome screen inviting to start the quizz
    $("title").text("Welcome to the JQuery QuizY");
    $(".qbox").hide();
    $("#result").append().html("Random");
    $("#result").append().html("<p id='start'>Start</p>");
    $("#start").on('click', function () {
        quiz();
    });
}

function quiz() {
    $("#start, #result").hide();
    $(".qbox").show();
    qload(counter);
    $("#next").on('click', function () {
        // get an input element containing selected option (answer)
        var oEl = $('input:radio[name=radio]:checked');
        // if such input element exists (any answer selected)
        if (oEl.length) {
            answers[counter] = parseInt(oEl.val());
            counter++;
        }
        else {
            alert("Please make your selection before continuing!");
        }

        // this checks if there are any questions left, otherwise it goes to the result screen
        if (counter < allQuestions.length) {
            qload(counter);
        }
        else {
            result();
        }
    });
}

welcome();

});

$（文档）.ready（函数（）{
var所有问题=[
{问题：“谁是联合王国首相？”，
选择：[“大卫·卡梅伦”、“戈登·布朗”、“温斯顿·丘吉尔”、“托尼·布莱尔”]，
正确答案：0}，
{问题：“天空是什么颜色的？”，
选项：[“灰色”、“黑色”、“蓝色”、“绿色”]，
正确答案：2}，
{问题：“链条上有什么？”，
选择：[“怪物”、“魔术师”、“公牛”、“骷髅”]，
正确答案：3}
];
var counter=0；//当前处理的问题编号
var answers=new Array（）；//玩家所做选择的数组
$（'#返回'）。单击（函数（）{
计数器++；
测验（）；
});
//更新后退按钮外观
函数updateBackBtn（）{
如果（计数器>0）
$（“#背”）.show（）；
其他的
$（“#背”）.hide（）；
}
//设置当前问题
函数qload（计数器）{
$（“标题”）。文本（“问题编号”）；
$（“#问题”）.text（所有问题[counter].question）；
更新b