如何通过单选按钮实现两个文本输入框的显隐切换？

嘿，我来帮你搞定这个单选按钮切换输入框显隐的需求！其实核心就是通过监听单选按钮的切换事件，动态修改目标输入框的显示状态，同时还要处理页面加载时的初始状态（毕竟你的PHP已经会预设单选按钮的选中值了）。下面是具体的实现步骤：

第一步：给需要控制的输入框加容器和类名 #

首先，你得把输入框A和B分别放进独立的容器里，并且给容器加个专属类名，这样JS才能精准找到它们。假设你的输入框A、B代码是这样的（你可以替换成你实际的代码）：

<!-- 输入框A的容器，加个input-a类 -->
<div class="input-group input-a">
  <div class="form-group">
    <input type="text" class="form-control form-control-user" id="InputA" name="input_a" placeholder="输入框A">
  </div>
</div>

<!-- 输入框B的容器，加个input-b类 -->
<div class="input-group input-b">
  <div class="form-group">
    <input type="text" class="form-control form-control-user" id="InputB" name="input_b" placeholder="输入框B">
  </div>
</div>

第二步：加个基础CSS避免页面闪烁 #

可以先给这些容器加个默认隐藏的样式，防止页面刚加载时两个输入框都露出来一下：

.input-group {
  display: none;
}

第三步：写JavaScript逻辑实现切换 #

我们需要做两件事：页面加载时根据选中的单选按钮显示正确的输入框，以及监听单选按钮的切换事件实时更新。把这段代码放在表单末尾或者页面的<script>标签里就行：

// 等页面DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有用户角色的单选按钮
  const roleRadios = document.querySelectorAll('input[name="user_role"]');
  // 获取两个输入框的容器
  const inputA = document.querySelector('.input-a');
  const inputB = document.querySelector('.input-b');

  // 定义切换显隐的函数
  function switchInputs() {
    // 找到当前选中的单选按钮的值
    const selectedRole = document.querySelector('input[name="user_role"]:checked').value;
    
    if (selectedRole === 'A') {
      // 选A的话：藏A输入框，显示B
      inputA.style.display = 'none';
      inputB.style.display = 'block';
    } else if (selectedRole === 'B') {
      // 选B的话：藏B输入框，显示A
      inputA.style.display = 'block';
      inputB.style.display = 'none';
    }
  }

  // 页面刚加载时先执行一次，设置初始状态
  switchInputs();

  // 给每个单选按钮加切换事件监听
  roleRadios.forEach(radio => {
    radio.addEventListener('change', switchInputs);
  });
});

第四步：适配你现有PHP的初始状态 #

因为你的PHP代码已经会根据$user_role给单选按钮加上checked属性了，上面的JS在页面加载时会自动识别当前选中的选项，直接显示对应的输入框，完全不用改你的PHP代码，完美适配！

小提醒 #

• 确保你输入框容器的类名（input-a/input-b）和JS里的选择器完全一致
• 如果你的输入框已经有外层容器了，直接给现有容器加类就行，不用额外嵌套
• 用原生JS就够了，不用额外引入jQuery，简洁又高效

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