多组单选按钮的JavaScript表单验证求助：二维元素使用疑问

Absolutely, you can use a 2D-like structure to handle each group of radio buttons—though in practice, you don’t even need to explicitly build a 2D array; you can iterate over each question’s radio group directly. Here’s how to solve the validation problem cleanly:

Step 1: Structure Your HTML Properly #

First, make sure each question’s radio buttons share a unique name attribute (this is required for radio button groups to function correctly anyway). For example:

<form id="quizForm">
  <!-- Question 1 -->
  <div class="question">
    <p>1. Sample question text?</p>
    <input type="radio" name="q1" value="a"> Option A<br>
    <input type="radio" name="q1" value="b"> Option B<br>
    <input type="radio" name="q1" value="c"> Option C<br>
    <input type="radio" name="q1" value="d"> Option D<br>
  </div>

  <!-- Repeat for questions 2-10, using q2, q3, ..., q10 as the name attribute -->

  <button type="submit">Submit Quiz</button>
</form>

Step 2: The Validation Function #

Here are two approaches to ensure every question has a selected radio button:

Approach 1: Iterate by Radio Group Names (Simple & Direct)

Since each question’s radios have a unique name, we can loop through each question number, fetch the radio group, and check if any option is selected:

function validateForm(event) {
  event.preventDefault(); // Stop form submission until validation passes
  const totalQuestions = 10;
  let allAnswered = true;

  for (let i = 1; i <= totalQuestions; i++) {
    // Get all radios for the current question
    const radioGroup = document.getElementsByName(`q${i}`);
    // Check if at least one radio in the group is checked
    const isAnswered = Array.from(radioGroup).some(radio => radio.checked);

    if (!isAnswered) {
      alert(`Please answer Question ${i}!`);
      allAnswered = false;
      break; // Stop at the first unanswered question to prompt the user
    }
  }

  if (allAnswered) {
    alert("All questions answered! Submitting...");
    document.getElementById("quizForm").submit(); // Submit the form if valid
  }
}

// Attach the function to the form's submit event (better than inline onclick)
document.getElementById("quizForm").addEventListener("submit", validateForm);

Approach 2: Use a 2D-like Structure (Group by Question Containers)

If you prefer working with a structure where each "row" is a question and each "column" is a radio button, select all question containers first, then get the radios inside each:

function validateForm(event) {
  event.preventDefault();
  const questionContainers = document.querySelectorAll(".question");
  let allAnswered = true;

  // Loop through each question container (first dimension of the 2D structure)
  questionContainers.forEach((container, index) => {
    // Get all radios inside the container (second dimension)
    const radios = container.querySelectorAll('input[type="radio"]');
    const isAnswered = Array.from(radios).some(radio => radio.checked);

    if (!isAnswered) {
      alert(`Please answer Question ${index + 1}!`);
      allAnswered = false;
      return; // Exit the loop early at the first unanswered question
    }
  });

  if (allAnswered) {
    alert("All questions answered! Submitting...");
    document.getElementById("quizForm").submit();
  }
}

// Attach to form submit event
document.getElementById("quizForm").addEventListener("submit", validateForm);

Key Notes: #

• event.preventDefault() prevents the form from submitting immediately, so we can run validation first.
• Array.from() converts the HTMLCollection (returned by getElementsByName or querySelectorAll) into an array, allowing us to use handy array methods like some().
• The some() method checks if at least one element in the array meets the condition (radio button is checked).
• The second approach is more flexible if you ever add/remove questions dynamically—you won’t have to hardcode the total number of questions.

Either approach works well, but the second one is more maintainable long-term. Let me know if you need help adapting this to your existing HTML structure!

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