如何使用JavaScript获取HTML单选按钮的值并实现问卷答案统计

问题排查与修复方案 #

你当前的代码存在5个核心问题，逐个修复即可实现需求：

1. 修复单选框互斥问题 #

你所有题目的单选框name属性都设为了_exam_，浏览器会把所有同名单选框视为同一组，导致选了第二题就会取消第一题的选择。需要按题目区分name属性，比如第一题的单选框name="q1"、第二题name="q2"，以此类推。

2. 修复重复ID问题 #

HTML要求ID全局唯一，你所有下一题按钮都用了id="button"，导致只有第一个按钮能绑定事件。把按钮ID删除，统一替换为class="nextBtn"即可。

3. 修复字典操作语法错误 #

JS对象取值不能用小括号，也不要给变量加引号，错误写法dict("rb.value")要改为dict[rb.value]。

4. 调整变量声明顺序 #

你在dict声明前就使用了dict，会触发未定义错误，要把变量声明移到事件绑定代码之前。

5. 新增答案序列存储逻辑 #

定义一个数组存储每道题的答案，最后到结果页拼接成字符串展示即可。

完整修改后的代码 #

HTML修改部分（只列需要调整的规则，其他内容保持不变） #

每道题的单选框name替换为当前题号，按钮修改为class属性：

<!-- 以第一题为例，剩余4道题按相同规则修改即可 -->
<form class="questionForm" id="q1" data-question="1">
    <div>
        <p>Question 1</p>
        <p><input type="radio" name="q1" value="a">A. Rustgeving</p>
        <p><input type="radio" name="q1" value="b">B. Zingeving</p>
        <p><input type="radio" name="q1" value="c">C. Duurzaamheid</p>
        <p><input type="radio" name="q1" value="d">D. Verzuiling</p>
        <p><input type="radio" name="q1" value="e">E. Zorgzaamheid</p>
    </div>
    <input class="nextBtn" type="button" value="Volgende">
</form>

完整JS代码 #

// 提前声明全局存储变量
var answerCount = {
    "a": 0,
    "b": 0,
    "c": 0,
    "d": 0,
    "e": 0,
};
var answerSequence = []; // 存储答案序列，最终拼接即可得到AABDC格式的结果

$(document).ready(function () {
    // 初始化隐藏所有题目和结果页
    $('.questionForm').hide();
    $('#results').hide();
    // 展示第一题
    $('#q1').show();

    // 统一绑定所有下一题按钮的点击事件，不需要逐个绑定
    $('.nextBtn').click(function () {
        // 获取当前题目容器、题目编号
        const currentForm = $(this).closest('.questionForm');
        const questionId = currentForm.attr('id');
        const currentQuestionNum = parseInt(currentForm.data('question'));
        // 获取当前题选中的单选值
        const checkedVal = $(`input[name="${questionId}"]:checked`).val();
        
        // 未选答案就点击下一题的拦截逻辑
        if(!checkedVal) {
            alert('请先选择答案再点击下一题');
            return false;
        }

        // 存储答案数据
        answerSequence.push(checkedVal.toUpperCase()); // 转大写后存入，最后拼接就是要求的大写序列格式
        answerCount[checkedVal] += 1;

        // 页面跳转逻辑
        $('.questionForm').hide();
        if(currentQuestionNum < 5) {
            // 还有未答题目，跳转到下一题
            $(`#q${currentQuestionNum + 1}`).show();
        } else {
            // 所有题目答完，跳转到结果页展示数据
            $('#results').show();
            const finalSequence = answerSequence.join('');
            $('#results').append(`<p>你的答案序列：${finalSequence}</p>`);
            $('#results').append(`<p>各选项选择次数：A:${answerCount.a} B:${answerCount.b} C:${answerCount.c} D:${answerCount.d} E:${answerCount.e}</p>`);
        }
        return false;
    });
});

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