jQuery答题功能if判断失效、刷新后radio仍选中问题咨询

两个异常都是选择器范围不当、控件状态未清理、浏览器默认行为共同导致的，具体如下：

• 第一处判断逻辑失效：
  你的答案判断逻辑里用的$(".true")、$(".false")是全局查找整个页面所有带对应class的单选框，没有限定在当前显示的题目范围内。第一题选过正确答案后，虽然题目被加了hide类隐藏，但对应正确选项的checked选中状态一直保留，没有被清空。切到第二题点提交时，jQuery会检测到页面里存在处于选中状态的.true元素（就是第一题之前选的那个隐藏选项），直接触发正确分支，给body加浅绿色背景、显示next按钮，完全忽略第二题的选择结果。
• 第二处刷新后radio保留选中状态：
  这是现代浏览器的默认表单状态记忆功能，浏览器会自动留存用户在页面上操作过的表单控件值/选中状态，页面刷新时默认恢复这些状态，不需要额外代码存储，除非手动重置或者关闭这个默认行为。

修复答案判断逻辑问题 #

1. 切换题目时，主动清空上一题所有单选框的选中状态，修改next按钮点击事件代码：

$(".next").click(function(){
    $("body").removeAttr("class");
    const lastQuest = $(".q"+questlist[i]);
    lastQuest.addClass("hide");
    // 清空上一题所有选项的选中状态
    lastQuest.find("input.ans").prop("checked", false);
    i++;
    $(".q"+questlist[i]).removeClass("hide");
    $(".next").addClass("hide");
});

2. 修改答案判断函数，只检测当前显示题目的选项状态，不要全局查找：

function answer() {
    // 先获取当前未隐藏的题目容器
    const currentQuest = $(".question:not(.hide)");
    if (currentQuest.find(".true").is(":checked")){
        $("body").attr("class","true");
        // 只显示当前题目的next按钮
        currentQuest.find(".next").removeClass("hide");
    }else if (currentQuest.find(".false").is(":checked")){
        $("body").attr("class","false");
    }else{
        alert("chose the answer");
    }
}

修复刷新后radio状态保留问题 #

两种方案选其一即可：

• 方案1：页面DOM加载完成后，主动重置所有单选框的选中状态

$(function(){
    $("input.ans").prop("checked", false);
})

• 方案2：给所有单选框加autocomplete="off"属性，告知浏览器不要记忆该控件状态，示例：

<input type="radio" name="q1" class="ans false" autocomplete="off">1

内容的提问来源于stack exchange，提问作者abcw11rp