AngularJS中点击单选按钮时自动清空文本框值的问题求助

Got it, let's solve this problem step by step. The key here is to listen for when a radio button is selected, then not only show the right text box but also reset its value to empty every time. Here's a straightforward vanilla JavaScript solution that works perfectly:

First, set up your HTML structure with the radio buttons and their corresponding text input containers (hidden by default):

<div class="gender-selection">
  <label>
    <input type="radio" name="gender" id="male-radio"> Male
  </label>
  <label>
    <input type="radio" name="gender" id="female-radio"> Female
  </label>
</div>

<!-- Male name input container (hidden initially) -->
<div id="male-name-container" style="display: none; margin-top: 1rem;">
  <label for="male-name">Your Name:</label>
  <input type="text" id="male-name" placeholder="Enter male name">
</div>

<!-- Female name input container (hidden initially) -->
<div id="female-name-container" style="display: none; margin-top: 1rem;">
  <label for="female-name">Your Name:</label>
  <input type="text" id="female-name" placeholder="Enter female name">
</div>

Next, add the JavaScript to handle the radio button changes. We'll attach event listeners to each radio button, and whenever one is selected, we'll hide all input containers, clear the selected input's value, then show it:

// Grab all the elements we need
const maleRadio = document.getElementById('male-radio');
const femaleRadio = document.getElementById('female-radio');
const maleNameContainer = document.getElementById('male-name-container');
const femaleNameContainer = document.getElementById('female-name-container');
const maleNameInput = document.getElementById('male-name');
const femaleNameInput = document.getElementById('female-name');

// Function to handle gender selection changes
function handleGenderSelect() {
  // Hide both input containers first
  maleNameContainer.style.display = 'none';
  femaleNameContainer.style.display = 'none';
  
  // Check which radio is selected and act accordingly
  if (maleRadio.checked) {
    maleNameInput.value = ''; // Clear the input value
    maleNameContainer.style.display = 'block'; // Show the container
    maleNameInput.focus(); // Optional: auto-focus the input for better UX
  } else if (femaleRadio.checked) {
    femaleNameInput.value = ''; // Clear the input value
    femaleNameContainer.style.display = 'block'; // Show the container
    femaleNameInput.focus(); // Optional: auto-focus the input
  }
}

// Attach event listeners to the radio buttons
maleRadio.addEventListener('change', handleGenderSelect);
femaleRadio.addEventListener('change', handleGenderSelect);

How this works: #

• Every time you click a radio button, the handleGenderSelect function runs.
• It first hides both input containers so only the correct one is shown.
• It clears the value of the selected input (so even if you typed something before, it resets to empty).
• Then it shows the corresponding container and optionally focuses the input to make typing easier.

This approach ensures that no matter how many times you switch between the radio buttons, the text box that appears is always empty and ready for a new entry.

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