用 display: none 配合 JS 切换表单项显隐最直接可靠；需同步控制 disabled 和 required 状态，基于控件真实状态（非 CSS 类名）判断，监听 change 事件并处理 reset 同步。
怎么用 display 控制表单项显隐
靠 CSS 的 display: none 配合 JS 切换是最直接、兼容性最好的方式。它不破坏 DOM 结构，不影响表单提交，也不会让屏幕阅读器完全“丢失”字段（只要没加 aria-hidden="true"）。
常见错误是用 visibility: hidden —— 元素还占位，布局会塌陷或错位；或者用 remove() 硬删节点，导致用户切回去时字段没了、数据丢了。
实操建议：
- 所有条件字段初始加上
class="js-hidden"，CSS 里写.js-hidden { display: none; } - JS 中用
element.classList.toggle("js-hidden", shouldHide)控制显隐，比反复设style.display更干净 - 别只靠显隐控制交互：隐藏时记得
element.disabled = true，否则键盘用户仍可 tab 进去、提交时还会带上空值
监听哪个事件来触发显示逻辑
选 change 而不是 input。下拉框（<select></select>）、单选（<input type="radio">）、复选（<input type="checkbox">）都只在值真正改变后才触发 change，不会误判中间状态。
立即学习“前端免费学习笔记（深入）”；
比如用户点开 <select></select> 又取消选择，input 会乱发，change 则稳当得多。
实操建议：
- 对
<select></select>和单选组，绑定change到父容器或具体控件都行，但推荐用事件委托：form.addEventListener("change", handleConditional) - 如果依赖多个字段组合判断（比如 A 是“其他”且 B 填了内容），别在每个字段上单独监听，统一收口到一个函数里做逻辑判断
- 首次加载页面时手动调一次判断函数，避免默认值已满足条件但字段仍隐藏
required 属性怎么随显隐动态生效
required 是布尔属性，不存在“动态 required”，只有存在或不存在。直接操作 element.required = true/false 或 element.setAttribute("required", "") / element.removeAttribute("required") 才有效。
常见坑是只改了显隐，忘了同步 required 状态，结果隐藏字段还在校验，或者该校验的字段被跳过。
实操建议：
- 显隐和
required必须成对处理：显示 →removeAttribute("disabled")+setAttribute("required", "")；隐藏 →setAttribute("disabled", "")+removeAttribute("required") - 不要用
required={condition}写法（那是 React 的 JSX，原生 HTML 不认） - 注意浏览器原生校验提示只在提交时触发，如果用户没点提交就离开页面，这个校验形同虚设——关键字段还得服务端兜底
为什么不能只靠 CSS 类名做条件判断
因为类名只是视觉标记，JS 读取类名判断逻辑容易和样式层耦合。比如某天设计师把 js-hidden 改成 visually-hidden，JS 就全失效；或者多人协作时有人手抖加了 hidden 类但没配 JS 逻辑，字段就卡死在隐藏态。
真正可靠的依据是字段本身的业务状态（如 select.value === "other"）或数据模型，而不是它当前“看起来有没有”。CSS 类只负责呈现，不该承载判断职责。
实操建议：
- 所有显隐逻辑基于控件的
value、checked、selectedOptions等真实状态计算，而不是查classList.contains("js-hidden") - 如果逻辑复杂，把判断抽成纯函数，比如
shouldShowOtherField(selectEl)，方便测试和复用 - 表单重置（
form.reset()）后，JS 状态不会自动同步，必须监听reset事件并手动恢复初始显隐逻辑
