如何检测radio button是否被选中？校园性格测验未答题提示开发求助

Hey there! Let's get that validation working for your personality quiz—you're close, just a few small fixes to sort out.

First, let's break down why your current code isn't working:

1. Syntax & Logic Errors: document.getElementsByName("color"):checked uses invalid syntax (it should be .checked, not :), and more importantly, getElementsByName returns a collection of elements, not a single one. You can't check .checked on the whole collection directly—you need to verify each individual radio button in the group.
2. Variable Mix-Up: Your loop references x.length but x isn't defined anywhere; you meant y.length, but even then, the way you populated the y array is incorrect.
3. Spelling Mismatch: Your HTML uses name="colour" for the first group, but your JS references name="color"—these need to match exactly, otherwise the code can't find the radio buttons!

Here's the Fixed Approach #

First, let's create a helper function to check if a single radio group has at least one option selected:

function isRadioGroupAnswered(groupName) {
  // Get all radio buttons in the target group
  const radioButtons = document.getElementsByName(groupName);
  // Convert the NodeList to an array, then check if any button is checked
  return Array.from(radioButtons).some(radio => radio.checked);
}

The some() method is perfect here—it stops checking as soon as it finds one checked button, making the check efficient.

Next, validate all your question groups at once:

// List all your radio group names (ensure these match your HTML exactly!)
const questionGroups = ["colour", "pattern", "store", "hat", "hair"];
let allQuestionsAnswered = true;

// Check each group for a selected answer
for (const group of questionGroups) {
  if (!isRadioGroupAnswered(group)) {
    allQuestionsAnswered = false;
    break; // No need to check further once we find an unanswered question
  }
}

// Show alert if any question was skipped
if (!allQuestionsAnswered) {
  alert("You didn't answer all the questions!");
}

Quick Checks to Ensure Success #

• Name Spelling: Double-check that every name attribute in your HTML matches the strings in the questionGroups array (I adjusted "color" to "colour" to match your HTML example).
• HTML Structure: Your existing choice HTML looks correct—each radio button shares the same name within a question group, which is how radio buttons are supposed to work.

This setup will reliably verify that every question has an answer before letting the user proceed.

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