当前位置：首页 > JavaScript

js实现单选判断对错

2026-03-01 20:17:20JavaScript

实现单选判断对错的功能

在JavaScript中实现单选判断对错的功能，可以通过监听用户的选择并与正确答案比对来完成。以下是一个完整的实现示例：

HTML结构

创建一个包含单选按钮的表单，每个选项对应一个可能的答案。

<form id="quiz-form">
  <p>问题：JavaScript是一种什么类型的语言？</p>
  <label>
    <input type="radio" name="answer" value="A"> A. 编译型语言
  </label>
  <label>
    <input type="radio" name="answer" value="B"> B. 解释型语言
  </label>
  <label>
    <input type="radio" name="answer" value="C"> C. 混合型语言
  </label>
  <button type="submit">提交答案</button>
</form>
<div id="result"></div>

JavaScript逻辑

添加事件监听器，在用户提交时验证答案。

document.getElementById('quiz-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const selectedAnswer = document.querySelector('input[name="answer"]:checked');
  const resultDiv = document.getElementById('result');

  if (!selectedAnswer) {
    resultDiv.textContent = '请选择一个答案';
    resultDiv.style.color = 'red';
    return;
  }

  const correctAnswer = 'B';
  if (selectedAnswer.value === correctAnswer) {
    resultDiv.textContent = '回答正确！';
    resultDiv.style.color = 'green';
  } else {
    resultDiv.textContent = '回答错误，正确答案是B';
    resultDiv.style.color = 'red';
  }
});

动态生成题目

如果需要动态生成题目，可以使用对象数组存储题目数据。

const questions = [
  {
    question: "JavaScript是一种什么类型的语言？",
    options: {
      A: "编译型语言",
      B: "解释型语言",
      C: "混合型语言"
    },
    answer: "B"
  }
];

function renderQuestion() {
  const quizForm = document.getElementById('quiz-form');
  const q = questions[0];

  let html = `<p>${q.question}</p>`;
  for (const [key, value] of Object.entries(q.options)) {
    html += `
      <label>
        <input type="radio" name="answer" value="${key}"> ${key}. ${value}
      </label>
    `;
  }
  html += '<button type="submit">提交答案</button>';
  quizForm.innerHTML = html;
}

renderQuestion();

添加样式

通过CSS改善用户界面体验。

#quiz-form {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

label {
  display: block;
  margin: 10px 0;
}

button {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#result {
  margin: 20px;
  font-weight: bold;
}

扩展功能

可以添加多个题目并实现题目切换功能。

let currentQuestion = 0;

function showNextQuestion() {
  currentQuestion++;
  if (currentQuestion < questions.length) {
    renderQuestion();
  } else {
    document.getElementById('quiz-form').innerHTML = '测验完成！';
  }
}

// 修改提交事件处理函数
document.getElementById('quiz-form').addEventListener('submit', function(e) {
  e.preventDefault();
  // ...原有的验证逻辑...

  // 添加延迟后显示下一题
  setTimeout(showNextQuestion, 1500);
});

这个实现提供了完整的单选判断功能，包括用户交互、答案验证和界面反馈。可以根据需要进一步扩展，如添加计时器、分数计算等功能。

js实现单选判断对错