单选按钮必须name相同才能互斥，value对应目标区域id，用change事件监听并结合classList.toggle控制显隐，初始需设checked或JS补触发。
单选按钮 name 必须一致才能互斥
浏览器只认 name 相同的 为一组，否则无法实现“选一个、取消其他”的行为。如果忘了设 name，或拼写不统一（比如 name="type" 和 name="TYPE"），就会出现多个可同时选中的假象，后续隐藏逻辑自然失效。
实操建议：
- 所有同组单选按钮必须共用完全相同的
name值，例如name="section" - 每个
需配value，用于区分选项，如value="profile"、value="settings" - 不要依赖
id或class判断分组，浏览器根本不看这些
用 change 事件监听，别用 click
click 在某些场景下会触发多次（比如快速连点、键盘空格切换），而 change 只在真正选中值发生变化时触发一次，更可靠。尤其当用户用键盘操作（Tab + 空格）时，click 可能不触发，但 change 一定响应。
实操建议：
- 绑定事件到整个单选组的父容器，或用事件委托监听
input[type="radio"] - 获取当前选中项用
document.querySelector('input[name="section"]:checked')，别遍历所有 - 若没选中任何项，
querySelector(...:checked)返回null，记得判空
根据 value 显示/隐藏对应区域，用 id 匹配最直接
把单选按钮的 value 和目标区域的 id 设计成一致（如 value="billing" → id="billing"），就能免去硬编码映射表，减少出错可能。DOM 操作用 classList.toggle("hidden", condition) 比直接改 style.display 更可控，也方便配合 CSS 过渡动画。
示例片段：
document.querySelectorAll('input[name="section"]').forEach(radio => {
radio.addEventListener('change', () => {
const targetId = radio.value;
document.querySelectorAll('.section').forEach(el => el.classList.add('hidden'));
const targetEl = document.getElementById(targetId);
if (targetEl) targetEl.classList.remove('hidden');
});
});
注意：.section 是所有待切换区域的公共 class，.hidden { display: none; } 是预设样式。
- 避免用
display: none直接赋值，CSS 类控制更易维护、可继承、不影响可访问性 - 确保每个
value都有唯一对应的id，否则getElementById返回null，隐藏后无显示 - 如果区域初始状态不统一（有的显示、有的隐藏），先统一加
.hidden再按需移除
移动端 Safari 和旧版 IE 对 :checked 的兼容性要留意
绝大多数现代浏览器支持 :checked 伪类和 querySelector，但 iOS 12 及更早 Safari 在动态插入单选按钮后，有时不触发 change；IE11 虽支持 :checked，但对事件委托响应略慢。这些问题不会报错，但会让隐藏逻辑“看起来没反应”。
实操建议：
- 不要动态生成单选按钮后立即调用
querySelector(...:checked)，等一帧再查：用setTimeout(fn, 0)或queueMicrotask - IE11 下避免用箭头函数写事件回调（若需支持），或确保已转译
- 真机测试比模拟器更靠谱，特别是 Safari 的表单控件行为常有差异
真实项目里最容易被忽略的是：单选按钮初始未设 checked 属性，导致页面加载后没有任何区域显示——这不算 bug，但用户第一眼看到空白，体验直接打折。得明确至少一个 input 带 checked，或者 JS 加载后主动触发一次显隐逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
