两组及以上每组含4个选项的radio单选按钮JavaScript校验问题

原代码存在的问题 #

• 内层循环索引错误：JS数组为0索引，原代码j从1开始遍历，且判断条件为j <= radiob[i].length，会跳过第一个单选按钮，同时最后一次访问会出现数组越界
• 选中状态判断错误：radiob[i]是整个单选组的DOM集合，不是单个单选按钮元素，需要取radiob[i][j].checked才能判断单个按钮是否选中
• 状态变量未重置：变量c用于标记当前单选组是否有选中项，但遍历完每个单选组后没有重置为0，只要有任意一组选中，后续所有组的校验都会被标记为已选中
• 校验结果初始值逻辑错误：check初始值设为false，且只有未选中的分支给它赋值false，全选的场景下值永远为false，会误触发提示
• 存在冗余变量：变量x定义后未使用，属于无效代码

修复后的可运行代码 #

function quizRadioFilled() {
    // 初始默认所有题都已完成
    var allFilled = true;
    var radioGroups = [
        document.getElementsByName('q1'),
        document.getElementsByName('q2'),
        document.getElementsByName('q3'),
        document.getElementsByName('q4'),
        document.getElementsByName('q5'),
        document.getElementsByName('q9'),
        document.getElementsByName('q10')
    ];
    // 遍历每个单选组
    for(var i = 0; i < radioGroups.length; i++) {
        var currentGroup = radioGroups[i];
        var groupChecked = false;
        // 遍历组内每个单选按钮
        for(var j = 0; j < currentGroup.length; j++) {
            if(currentGroup[j].checked) {
                groupChecked = true;
                break;
            }
        }
        // 只要有一组没选中，整体结果设为未完成
        if(!groupChecked) {
            allFilled = false;
            // 此处可直接break终止遍历，提升性能
            // break;
        }
    }
    if(!allFilled) {
        alert('Please attempt all the questions....');
    }
}

通用优化方案 #

如果后续需要新增单选组，不用手动修改数组，可以直接自动识别页面所有单选组，适配任意数量的题目：

function quizRadioFilled() {
    // 筛选页面所有单选按钮
    const allRadios = document.querySelectorAll('input[type="radio"]');
    // 按name属性自动分组去重
    const groupNames = new Set([...allRadios].map(radio => radio.name));
    let allFilled = true;
    for (const name of groupNames) {
        // 直接查询该组是否有选中项，无需嵌套循环
        const hasChecked = document.querySelector(`input[type="radio"][name="${name}"]:checked`);
        if (!hasChecked) {
            allFilled = false;
            break;
        }
    }
    if(!allFilled) alert('Please attempt all the questions....');
}

内容的提问来源于stack exchange，提问作者401 Harshit Tewatia