JavaScript测验题：Checkbox单选答案校验功能异常求助

核心问题分析 #

你的代码存在几个关键错误导致校验失败：

1. HTML中classname是拼写错误，正确属性名是class
2. 所有checkbox的value统一设为Value1，无法区分选项a/b/c/d
3. 获取正确答案的方式错误：questions.valueOf(oikeaVastaus)不符合语法，应该直接取questions.correctAnswer
4. 获取用户选择时，document.getElementsByClassName("box")返回的是所有复选框的集合，不是选中的单个选项，需要筛选出被勾选的元素

修正后的Checkbox方案 #

1. 修正HTML结构 #

调整class属性和value值，让每个checkbox的value对应选项标识a/b/c/d：

<div id="vastausformi">
    <form id="vastaukset"> 
        <label for="Check1">A) Stockholm</label>
        <input type="checkbox" class="box" id="Check1" value="a" onclick="selectOnlyThis(this.id)" />  

        <label for="Check2">B) Malmö</label>
        <input type="checkbox" class="box" id="Check2" value="b" onclick="selectOnlyThis(this.id)" />  
         
        <label for="Check3">C) Göteborg</label>
        <input type="checkbox" class="box" id="Check3" value="c" onclick="selectOnlyThis(this.id)" />   

        <label for="Check4">D) Helsingborg</label>
        <input type="checkbox" class="box" id="Check4" value="d" onclick="selectOnlyThis(this.id)" /> 
    </form>
</div>
<!-- 新增结果展示区域 -->
<div id="result"></div>
<button id="guessSubmit">提交答案</button>

2. 修正checkGuess函数 #

正确获取选中选项和校验答案，同时添加页面结果展示：

let questions = {
  question: "Which city is the capital of Sweden?",
  vastaus:{
      a: 'Stockholm',
      b: 'Malmö',
      c: 'Göteborg',
      d: 'Helsingborg'
  },
  correctAnswer: 'a'
};

// 保持你的单选功能函数
function selectOnlyThis(checkboxId) {
    let checkboxes = document.getElementsByClassName("box");
    for(let i=0; i<checkboxes.length; i++) {
        if(checkboxes[i].id !== checkboxId) {
            checkboxes[i].checked = false;
        }
    }
}

// 修正后的校验函数
function checkGuess(){
    // 获取正确答案
    const correctAnswer = questions.correctAnswer;
    // 筛选出被选中的checkbox
    const selectedBox = Array.from(document.getElementsByClassName("box"))
        .find(box => box.checked);
    
    // 判断是否有选中项
    if(!selectedBox) {
        document.getElementById("result").textContent = "请选择一个选项";
        return;
    }

    const playerChoice = selectedBox.value;
    // 校验并展示结果
    if(playerChoice === correctAnswer){
        document.getElementById("result").textContent = "回答正确！";
        console.log("correct");
    } else {
        document.getElementById("result").textContent = `回答错误，正确答案是${questions.vastaus[correctAnswer]}`;
        console.log("wrong");
    }
};

// 绑定提交按钮事件
const guessSubmit = document.getElementById("guessSubmit");
guessSubmit.addEventListener('click', checkGuess);

更合适的Radio替代方案 #

单选场景原生radio更合适，无需额外写单选控制逻辑，修正后的代码如下：

HTML结构 #

<div id="vastausformi">
    <form id="vastaukset"> 
        <label for="a">A) Stockholm</label>
        <input type="radio" name="answer" id="a" value="a" />  

        <label for="b">B) Malmö</label>
        <input type="radio" name="answer" id="b" value="b" />  
         
        <label for="c">C) Göteborg</label>
        <input type="radio" name="answer" id="c" value="c" />   

        <label for="d">D) Helsingborg</label>
        <input type="radio" name="answer" id="d" value="d" /> 
    </form>
</div>
<div id="result"></div>
<button id="guessSubmit">提交答案</button>

对应的校验函数 #

let questions = {
  question: "Which city is the capital of Sweden?",
  vastaus:{
      a: 'Stockholm',
      b: 'Malmö',
      c: 'Göteborg',
      d: 'Helsingborg'
  },
  correctAnswer: 'a'
};

function checkGuess(){
    const correctAnswer = questions.correctAnswer;
    // 获取选中的radio
    const selectedRadio = document.querySelector('input[name="answer"]:checked');
    
    if(!selectedRadio) {
        document.getElementById("result").textContent = "请选择一个选项";
        return;
    }

    const playerChoice = selectedRadio.value;
    if(playerChoice === correctAnswer){
        document.getElementById("result").textContent = "回答正确！";
        console.log("correct");
    } else {
        document.getElementById("result").textContent = `回答错误，正确答案是${questions.vastaus[correctAnswer]}`;
        console.log("wrong");
    }
};

const guessSubmit = document.getElementById("guessSubmit");
guessSubmit.addEventListener('click', checkGuess);

多题切换功能提示 #

后续实现多题切换可以将题目改为数组结构，比如：

const questions = [
    {
        question: "Which city is the capital of Sweden?",
        vastaus:{ a: 'Stockholm', b: 'Malmö', c: 'Göteborg', d: 'Helsingborg' },
        correctAnswer: 'a'
    },
    {
        question: "Which city is the capital of Norway?",
        vastaus:{ a: 'Oslo', b: 'Bergen', c: 'Trondheim', d: 'Stavanger' },
        correctAnswer: 'a'
    }
];

然后维护一个当前题目索引，通过按钮切换索引，重新渲染题目选项即可。

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