在线测试开发：如何检测未勾选的list-group单选按钮？

我正在开发一个在线测试网站，每个题目配有4个单选按钮作为选项。目前用以下代码获取已勾选的选项值：

const formData = new FormData(document.getElementById('form'));
let checkvalues = []
for (const value of formData.values()) {
   checkvalues.push(value)
}

但存在问题：如果某道题的4个单选按钮都没勾选，我无法获取该题对应的空白/空值。想请教：如何判断list-group中的未勾选单选按钮？或者有没有设置默认值的方案？

附相关代码文件：

test.js #

var data = [
    {
        "id" : 1,
        "question" : "jvm is____________",
        "options" : [
            "platform dependant",
            "platform lndepedent",
            "depends on jvm implementation",
            "Both b and c"
        ],
        "answer" : "platform dependant"
    },
    {
        "id" : 2,
        "question" : "return type of main method is______",
        "options" : [
            "int",
            "char",
            "void",
            "None of the above"
        ],
        "answer" : "void"
    }
]

index.html #

<p id="result" class="m-3"></p>
<form id="form">
<div id="test" class="card-body"></div>

<div class="d-flex justify-content-center mb-5">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>

Javascript #

<script>
        $("#form").submit((event) => {
            event.preventDefault();
            onTimesUp()
            submit()
        }
        )

        function submit() {
            $("list-group-item").addClass('disabled')
            const formData = new FormData(document.getElementById('form'));
            let checkvalues = []
            let result = []
            for (const value of formData.values()) {
                checkvalues.push(value)
            }
            for (const key of formData.keys()) {
                console.log(key)
            }
            var i = 0;
            var sum = 0;
            data.map((que) => {
                if (que.answer === checkvalues[i]) {
                    sum += 1;
                    $(`#answer${i + 1}`).addClass('text-success').html('Right answer');
                }
                else {
                    $(`#answer${i + 1}`).addClass('text-danger').html(`Wrong answer.<p class='text-success mb-1'> Right answer : ${que.answer}</p>`);
                }
                i++
            })

            $("#result").html(`Your score : ${sum}/${data.length}`)
            $("#result").show()
        }

        $(window).on('load', function () {
            $("#result").hide()
            $("#answer").hide()
            data.map((que) => {
                $("#test").append(`
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="card mb-2">
                            <div class="card-body">
                                <p>Q.${que.id} ${que.question}</p>
                            </div>                           
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <input class="form-check-input me-1" type="radio" name="listGroupRadio${que.id}" value="${que.options[0]}" id="firstRadio">
                                <label class="form-check-label" for="firstRadio">${que.options[0]}</label>
                            </li>
                            <li class="list-group-item">
                                <input class="form-check-input me-1" type="radio" name="listGroupRadio${que.id}" value="${que.options[1]}" id="secondRadio">
                                <label class="form-check-label" for="secondRadio">${que.options[1]}</label>
                            </li>
                            <li class="list-group-item">
                                <input class="form-check-input me-1" type="radio" name="listGroupRadio${que.id}" value="${que.options[2]}" id="thirdRadio">
                                <label class="form-check-label" for="secondRadio">${que.options[2]}</label>
                            </li>
                            <li class="list-group-item">
                                <input class="form-check-input me-1" type="radio" name="listGroupRadio${que.id}" value="${que.options[3]}" id="fourthRadio">
                                <label class="form-check-label" for="secondRadio">${que.options[3]}</label>
                            </li>
                        </ul>
                        <p id='answer${que.id}' class='mt-2 mb-1'></p>
                    </div>
                </div>               
                `)
            })

        });

    </script>

提供两种可行方案，按需选择：

方案一：给每个单选组添加隐藏默认选项 #

给每个题目的单选按钮组加一个隐藏的默认选项，值设为空字符串，确保即使用户未选任何选项，FormData也能捕获到对应空值。同时修复原代码中label的for属性重复冲突问题：

data.map((que) => {
    $("#test").append(`
    <div class="card mb-3">
        <div class="card-body">
            <div class="card mb-2">
                <div class="card-body">
                    <p>Q.${que.id} ${que.question}</p>
                </div>                           
            </div>
            <ul class="list-group">
                <!-- 新增隐藏的默认选中项 -->
                <li class="list-group-item d-none">
                    <input class="form-check-input" type="radio" name="listGroupRadio${que.id}" value="" checked>
                </li>
                <li class="list-group-item">
                    <input class="form-check-input me-1" type="radio" name="listGroupRadio${que.id}" value="${que.options[0]}" id="firstRadio${que.id}">
                    <label class="form-check-label" for="firstRadio${que.id}">${que.options[0]}</label>
                </li>
                <li class="list-group-item">
                    <input class="form-check-input me-1" type="radio" name="listGroupRadio${que.id}" value="${que.options[1]}" id="secondRadio${que.id}">
                    <label class="form-check-label" for="secondRadio${que.id}">${que.options[1]}</label>
                </li>
                <li class="list-group-item">
                    <input class="form-check-input me-1" type="radio" name="listGroupRadio${que.id}" value="${que.options[2]}" id="thirdRadio${que.id}">
                    <label class="form-check-label" for="thirdRadio${que.id}">${que.options[2]}</label>
                </li>
                <li class="list-group-item">
                    <input class="form-check-input me-1" type="radio" name="listGroupRadio${que.id}" value="${que.options[3]}" id="fourthRadio${que.id}">
                    <label class="form-check-label" for="fourthRadio${que.id}">${que.options[3]}</label>
                </li>
            </ul>
            <p id='answer${que.id}' class='mt-2 mb-1'></p>
        </div>
    </div>               
    `)
})

修改后，checkvalues数组长度将和题目数量完全对应，未作答的题目会存入空字符串，后续评分逻辑无需大幅调整。

方案二：遍历题目检查单选组选中状态 #

不修改HTML结构，提交时直接遍历所有题目，手动检查对应单选组的选中状态，未选中则填入空值：

function submit() {
    $(".list-group-item").addClass('disabled')
    let checkvalues = []
    
    // 遍历每个题目，检查对应单选组的选中状态
    data.forEach(que => {
        const radioName = `listGroupRadio${que.id}`
        const selected = document.querySelector(`input[name="${radioName}"]:checked`)
        checkvalues.push(selected ? selected.value : "")
    })

    var sum = 0;
    data.map((que, index) => {
        if (que.answer === checkvalues[index]) {
            sum += 1;
            $(`#answer${que.id}`).addClass('text-success').html('正确答案');
        }
        else {
            // 针对未作答的题目显示专属提示
            const tipText = checkvalues[index] === "" 
                ? "未作答" 
                : `错误答案.<p class='text-success mb-1'> 正确答案：${que.answer}</p>`
            $(`#answer${que.id}`).addClass('text-danger').html(tipText);
        }
    })

    $("#result").html(`你的得分：${sum}/${data.length}`)
    $("#result").show()
}

此方案还修复了原代码中$("list-group-item")缺少类选择器.的错误，同时能针对未作答题目显示更清晰的提示。

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