如何判断<input type="button">是否被选中？用于测验计分

看起来你遇到的核心问题是：明明选中了选项，但JS判断checked属性时始终返回false，导致计分逻辑失效。我来帮你一步步排查和解决：

首先排查最常见的几个问题 #

1. 元素ID是否匹配？ #

你循环用i.toString()作为ID获取元素，那得先确认你的HTML里的input标签ID是不是完全对应1到8（比如有没有拼写错误、多空格、或者ID是别的命名规则，比如q1而不是1）。

你可以先在控制台手动测试：比如选中第一个选项后，输入document.getElementById("1").checked，看看返回的是true还是false。如果是false，要么是ID不对，要么是你选中的不是这个ID的元素。

2. JS代码执行时机是否正确？ #

如果你的JS代码写在<head>标签里，或者DOM还没加载完成就执行了，那获取到的元素可能是null，但你说控制台打印false，可能是元素存在但还没被选中？不对，你是点击按钮后执行的计分逻辑吧？

哦对，你是点击按钮触发的，那这条可能不成立，但还是建议把JS代码放在<body>末尾，或者用DOMContentLoaded包裹，确保DOM完全加载：

document.addEventListener('DOMContentLoaded', function() {
  // 把你的按钮点击事件和计分逻辑放在这里
});

3. Input的type是否正确？ #

只有type="radio"或type="checkbox"的input才有checked属性，如果你的input是type="text"或者其他类型，那checked会一直是false。检查你的HTML：

<!-- 正确的单选框示例 -->
<input type="radio" id="1" name="question1" value="correct">
<!-- 正确的复选框示例 -->
<input type="checkbox" id="2" name="question2" value="correct">

优化你的计分逻辑（更可靠的写法） #

依赖ID判断容易出错，推荐用name分组+选中状态选择器的方式，这样不需要硬编码ID，逻辑更清晰：

假设你的每个测验题是一组单选框，name分别是question1到question8，正确选项的value设为"correct"，那可以这样写：

function calculateScore() {
  let score = 0;
  // 循环8个问题组
  for (let i = 1; i <= 8; i++) {
    // 获取当前问题组中被选中的选项
    const selected = document.querySelector(`input[name="question${i}"]:checked`);
    // 如果有选中的选项，且是正确答案，加分
    if (selected && selected.value === "correct") {
      score += 2;
    }
  }
  console.log("最终得分：", score);
  // 这里可以把得分显示到页面上
}

// 给按钮绑定点击事件
document.getElementById("scoreBtn").addEventListener('click', calculateScore);

这种写法的好处是：

• 不需要依赖ID，避免ID不匹配的问题
• 直接通过:checked选择器获取选中的元素，判断更准确
• 同时检查是否有选中项（避免用户没选的情况）

最后再做一次验证 #

1. 点击某个选项后，在控制台输入document.querySelector('input[name="question1"]:checked')，看看是否能返回你选中的那个input元素
2. 如果能返回，再看它的checked属性和value是否正确

这样一步步排查，应该就能解决你的问题了！

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