如何实现HTML表单单选按钮选择后联动显示/隐藏对应表单项

你需要新增CSS控制隐藏状态，再添加JavaScript监听单选按钮的选择事件切换字段显隐，修改内容如下：

第一步：新增CSS样式 #

在页面<head>标签内添加如下样式，定义隐藏类：

.hidden {
  display: none;
}

第二步：修改HTML字段结构 #

将原EPN和学校名称的代码替换为带外层包裹的结构，方便同时控制标签和输入框的显隐：

<!-- EPN 输入字段组 -->
<div id="epnField" class="hidden">
  <label>EPN </label>
  <input type="text" name="Number" value="" maxlength="18"/>
</div>
<!-- 学校名称输入字段组 -->
<div id="schoolNameField" class="hidden">
  <label>学校名称 </label>
  <input type="text" name="SingleLine3" value="" fieldType=1 maxlength="255" />
</div>

第三步：新增JavaScript交互逻辑 #

在页面底部（</body>标签前）添加如下脚本，实现单选切换的监听逻辑：

// 获取学校选择单选组、两个待控制的字段组
const schoolRadios = document.querySelectorAll('input[name="Radio"]');
const epnField = document.getElementById('epnField');
const schoolNameField = document.getElementById('schoolNameField');

// 给每个单选按钮绑定选择事件
schoolRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio.value === 'chaitanya School') {
      // 选中Chaitanya School时显示EPN输入框，隐藏学校名称
      epnField.classList.remove('hidden');
      schoolNameField.classList.add('hidden');
    } else if (radio.value === 'Other') {
      // 选中Other时显示学校名称输入框，隐藏EPN
      schoolNameField.classList.remove('hidden');
      epnField.classList.add('hidden');
    }
  });
});

// 页面加载完成后初始化字段状态，适配默认选中的单选值
document.addEventListener('DOMContentLoaded', () => {
  const checkedRadio = document.querySelector('input[name="Radio"]:checked');
  checkedRadio && checkedRadio.dispatchEvent(new Event('change'));
});

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