单选框选中统计异常：12道题选中数始终返回0

问题分析 #

你的代码存在几个关键错误，导致统计结果一直为0：

1. 变量初始化顺序颠倒
   你先声明了set1a = set1.children，但此时set1还未通过getElementById获取，set1是undefined，因此set1a也为undefined，后续循环根本无法执行。

2. 外层循环条件逻辑混乱
   原代码的循环条件i < set1a[i].length完全不符合遍历需求，你需要遍历set1下的12个题目模块，正确条件应为i < set1a.length。

3. 冗余且错误的内层循环
   原代码中的j循环毫无必要，set1ch[2]是每个题目对应的答案容器（.ans），直接获取它的子元素即可，不需要循环它的长度。另外，set1che[k]包含input和img两种元素，直接用querySelector('input:checked')会在img元素上查找，永远无法命中目标，需先过滤出input元素再判断是否选中。

4. 事件绑定逻辑重复
   每次点击按钮都添加一次click监听器，会导致多次触发跳转逻辑，应该直接在校验通过后执行跳转操作，避免重复绑定。

修正后的代码 #

JavaScript部分 #

// 先获取元素，再访问子元素
const set1 = document.getElementById('set1');
const set1a = set1.children;
const nextB1 = document.getElementById('next1');

function n1() {
    let setac = 0;
    // 遍历每个题目模块
    for (let i = 0; i < set1a.length; i++) {
        const questionModule = set1a[i];
        // 获取当前题目下的所有单选按钮
        const radioInputs = questionModule.querySelectorAll('input[type="radio"]');
        // 检查是否有选中的单选按钮
        for (let radio of radioInputs) {
            if (radio.checked) {
                setac++;
                break; // 每个题目只有一个选中项，找到后直接跳出循环
            }
        }
    }

    if (setac === 12) {
        // 直接执行跳转逻辑，避免重复绑定事件
        window.scrollTo(0, 0);
        set1.classList.add('hide');
        set2.classList.remove('hide');
    } else {
        alert('Kérem mindenhol adjon meg egy választ!');
    }
    console.log(setac);
}

简化说明 #

• 调整变量顺序，确保先获取DOM元素再操作其子元素
• 用querySelectorAll直接定位每个题目下的单选按钮，简化DOM遍历逻辑
• 每个题目找到选中项后立即跳出循环，提升执行效率
• 校验通过后直接执行跳转，避免重复绑定事件导致的多次触发

额外优化建议 #

可以进一步简化统计逻辑，利用CSS选择器直接筛选所有选中的单选按钮：

function n1() {
    const checkedRadios = set1.querySelectorAll('input[type="radio"]:checked');
    const setac = checkedRadios.length;

    if (setac === 12) {
        window.scrollTo(0, 0);
        set1.classList.add('hide');
        set2.classList.remove('hide');
    } else {
        alert('Kérem mindenhol adjon meg egy választ!');
    }
    console.log(setac);
}

这种方式代码更简洁，逻辑更清晰，也不容易出错。

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