当前位置：首页 > JavaScript

js实现单选判断对错

2026-01-31 05:06:49JavaScript

实现单选判断对错的功能

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

HTML结构

创建一个包含单选按钮的表单，每个问题对应一组选项：

js实现单选判断对错

<div class="quiz-container">
  <div class="question">
    <p>1. JavaScript是一种什么类型的语言？</p>
    <label><input type="radio" name="q1" value="A"> A. 编译型</label>
    <label><input type="radio" name="q1" value="B"> B. 解释型</label>
    <label><input type="radio" name="q1" value="C"> C. 混合型</label>
  </div>

  <div class="question">
    <p>2. 以下哪个不是JavaScript的基本数据类型？</p>
    <label><input type="radio" name="q2" value="A"> A. String</label>
    <label><input type="radio" name="q2" value="B"> B. Number</label>
    <label><input type="radio" name="q2" value="C"> C. Array</label>
  </div>

  <button id="check-btn">检查答案</button>
  <div id="result"></div>
</div>

JavaScript逻辑

添加事件监听器，当用户点击检查按钮时验证答案：

js实现单选判断对错

document.getElementById('check-btn').addEventListener('click', function() {
  const answers = {
    q1: 'B', // 第一题的正确答案是B
    q2: 'C'  // 第二题的正确答案是C
  };

  let score = 0;
  const totalQuestions = Object.keys(answers).length;

  // 检查每道题的回答
  for (const question in answers) {
    const selectedOption = document.querySelector(`input[name="${question}"]:checked`);

    if (selectedOption && selectedOption.value === answers[question]) {
      score++;
      selectedOption.parentElement.style.color = 'green';
    } else if (selectedOption) {
      selectedOption.parentElement.style.color = 'red';
    }
  }

  // 显示结果
  const resultDiv = document.getElementById('result');
  resultDiv.innerHTML = `你答对了 ${score} 题，共 ${totalQuestions} 题`;
});

CSS样式（可选）

添加一些基本样式提升用户体验：

.quiz-container {
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.question {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#check-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#check-btn:hover {
  background-color: #45a049;
}

功能扩展

要实现即时反馈（不用点击检查按钮），可以修改为监听单选按钮的change事件：

document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', function() {
    const questionName = this.name;
    const correctAnswer = answers[questionName];

    if (this.value === correctAnswer) {
      this.parentElement.style.color = 'green';
    } else {
      this.parentElement.style.color = 'red';
    }
  });
});