单选按钮控制文本框显隐问题：现有JavaScript代码无法正常运行求助

嘿，你的代码逻辑本身是对的，但为啥没效果呢？因为你只在页面加载的时候调用了一次fieldShower()函数，之后点击单选按钮的时候根本没触发这个函数呀！这就好比你设置了一个开关规则，但没人去按开关~

要让单选按钮点击时触发状态更新，我们需要把fieldShower()函数绑定到每个单选按钮的点击事件上，下面给你两种可行的修复方案：

方法1：直接在HTML里添加点击事件 #

先补全完整的HTML结构（单选按钮要加相同的name属性才能互斥选择），再给每个单选按钮绑定onclick事件：

<div>
  <input type="radio" name="radGroup" id="rad1" onclick="fieldShower()"> 显示文本框1
  <input type="radio" name="radGroup" id="rad2" onclick="fieldShower()"> 显示文本框2
  <input type="radio" name="radGroup" id="rad3" onclick="fieldShower()"> 隐藏所有
</div>
<form>
  <input type="text" id="textField1" placeholder="文本框1" style="display: none;">
  <input type="text" id="textField2" placeholder="文本框2" style="display: none;">
</form>

修复后的JavaScript代码（保留初始调用确保页面加载时状态正确）：

// 页面加载时先执行一次，确保初始状态正确
fieldShower();

function fieldShower() {
  const rad1 = document.getElementById('rad1');
  const rad2 = document.getElementById('rad2');
  const text1 = document.getElementById('textField1');
  const text2 = document.getElementById('textField2');

  if (rad1.checked) {
    text1.style.display = 'block';
    text2.style.display = 'none';
  } else if (rad2.checked) {
    text1.style.display = 'none';
    text2.style.display = 'block';
  } else {
    text1.style.display = 'none';
    text2.style.display = 'none';
  }
}

方法2：用事件监听（更推荐，分离HTML和JS） #

这种方式不用修改HTML结构，把事件绑定逻辑完全放在JS里，代码更易维护：

<div>
  <input type="radio" name="radGroup" id="rad1"> 显示文本框1
  <input type="radio" name="radGroup" id="rad2"> 显示文本框2
  <input type="radio" name="radGroup" id="rad3"> 隐藏所有
</div>
<form>
  <input type="text" id="textField1" placeholder="文本框1" style="display: none;">
  <input type="text" id="textField2" placeholder="文本框2" style="display: none;">
</form>

对应的JavaScript代码：

// 获取所有同组的单选按钮和文本框元素
const radios = document.querySelectorAll('input[name="radGroup"]');
const text1 = document.getElementById('textField1');
const text2 = document.getElementById('textField2');

function fieldShower() {
  const rad1 = document.getElementById('rad1');
  const rad2 = document.getElementById('rad2');

  if (rad1.checked) {
    text1.style.display = 'block';
    text2.style.display = 'none';
  } else if (rad2.checked) {
    text1.style.display = 'none';
    text2.style.display = 'block';
  } else {
    text1.style.display = 'none';
    text2.style.display = 'none';
  }
}

// 给每个单选按钮绑定点击事件
radios.forEach(radio => {
  radio.addEventListener('click', fieldShower);
});

// 初始执行一次，确保页面加载时状态正确
fieldShower();

小提示：一定要给单选按钮加上相同的name属性，这样它们才会成为互斥的单选组，同一时间只能选中一个哦！

内容的提问来源于stack exchange，提问作者Il De Santa