最稳的显隐控制是用 style.display="" 还原浏览器计算的 display 值，避免硬写 "block"/"inline" 导致布局错位；change 事件监听 select 最可靠，radio 应主动查询 checked 状态；hidden 属性不可替代 display，因其不阻止表单提交和焦点捕获。
直接用 style.display 控制最稳，但别硬写 "block" 或 "inline"——90% 的显隐失效都源于这个细节。
change 事件监听 select 后，用 value 匹配显示目标元素
下拉框选中值变化时，change 是唯一可靠事件（input 不触发，click 有延迟）。关键不是“怎么监听”，而是“怎么还原默认显示”：
- 先统一设为
display: none清空状态，避免残留可见项 - 再根据
this.value切换目标元素：匹配成功就设elem.style.display = ""，让浏览器回退到 CSS 计算出的真实display值 - 如果目标是
<input>或<label></label>这类默认inline元素，硬写"block"会导致换行错位
radio 按钮组必须用 checked 状态做判断依据
单选按钮没有 change 事件的冒泡保障，且 IE 下 onclick 更可靠。重点在于逻辑闭环：
- 不要只写“选中 A 就显示 A”，必须明确“未选中 A 时 A 区域要隐藏”
- 推荐用
document.querySelectorAll('input[name="xxx"]:checked')主动查状态，比依赖事件参数更防错 - 多个区块联动时，用对象映射关系（如
{ "1": "section-personal", "2": "section-business" }），避免 if-else 嵌套过深
别用 hidden 属性替代 display 控制表单流
hidden 是语义属性，浏览器跳过渲染，但表单控件仍参与 form.elements 遍历、仍可被 tabindex 聚焦——这在动态表单里极易引发提交遗漏或焦点陷阱：
- 用户切换选项后，被
hidden的<input>依然在FormData中，可能意外提交空值 - 屏幕阅读器会跳过
hidden元素，但若该区域本应随选择“临时禁用”，语义上其实该用disabled+display: none - IE 完全不支持
hidden，而表单场景往往要求兼容旧环境
display: "" 不是摆设，是还原布局的关键
很多开发者以为设成空字符串等于没操作，其实它是显式告诉浏览器：“我不干预这个样式，按层叠规则来”。这意味着：
- Flex 容器里的子元素恢复为
display: flex-item（不是 block） - Grid 子项保持
display: grid-item - 用 Bootstrap 或 Tailwind 的组件（如
.d-none）后，仅靠 classList.remove 无法还原原始 display，必须配合style.display = ""
真正容易被忽略的，是那些由 CSS 框架或外部样式表定义的 display 值——它们不会出现在 elem.style.display 里，只能靠清空内联样式触发重新计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
