ng-repeat中Radio button条件判断异常求助：else语句始终执行

Hey there! I totally get how frustrating it is when your conditional logic doesn’t fire as expected—let’s break down the most common reasons your radio button check is always hitting the else block, and fix it step by step.

Common Issues & Fixes #

1. Mismatched name Attributes on Radio Buttons #

Radio buttons in the same group must share the same name attribute to function correctly. If they don’t, the browser won’t recognize them as a mutually exclusive set, and your JS won’t be able to detect a selected option properly.

Example of correct grouping:

<!-- Good: All radio buttons in this group have the same name -->
<label>
  <input type="radio" name="user-choice" value="option1"> Option 1
</label>
<label>
  <input type="radio" name="user-choice" value="option2"> Option 2
</label>

2. Incorrectly Checking for Selected Radio Buttons #

Double-check how you’re querying for the selected radio in your JS. The most reliable way is to use the :checked pseudo-class with querySelector:

// Get the selected radio button (returns null if none are selected)
const selectedRadio = document.querySelector('input[name="user-choice"]:checked');

if (selectedRadio) {
  // This runs when a radio is selected
  console.log("Selected value:", selectedRadio.value);
} else {
  // This runs only if NO radio is selected
  console.log("No option selected");
}

Avoid using older methods like getElementsByName unless you explicitly iterate through the collection to check the checked property—querySelector is cleaner and less error-prone.

3. JS Executes Before the DOM is Loaded #

If your script runs before the radio buttons are rendered in the DOM, it won’t find the elements at all, leading to the else block always running. Fix this by:

• Placing your <script> tag right before the closing </body> tag, so it runs after the DOM is built
• Wrapping your logic in a DOMContentLoaded event listener:

document.addEventListener('DOMContentLoaded', function() {
  // Your radio button check logic or event bindings go here
  const submitButton = document.getElementById('submit-btn');
  submitButton.addEventListener('click', function() {
    const selectedRadio = document.querySelector('input[name="user-choice"]:checked');
    if (selectedRadio) {
      // Handle selected case
    } else {
      // Handle unselected case
    }
  });
});

4. Unintended Page Refresh or State Reset #

If your radio buttons are inside a form, clicking a submit button might trigger the default form submission, which refreshes the page and resets the radio state. Prevent this with event.preventDefault():

const form = document.getElementById('my-form');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // Stop the page from reloading
  const selectedRadio = document.querySelector('input[name="user-choice"]:checked');
  if (selectedRadio) {
    // Process the selected value
  }
});

Next Steps #

If you’re still stuck, sharing your exact HTML and JS code would help narrow down the issue even more. But odds are one of these fixes will get your conditional logic working as expected!

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