最稳方式是用 change 事件监听 radio 组，配合 data-id 映射控制显隐；onclick 易漏触发且不兼容初始未选中或键盘操作，而 change 语义准确、兼容性好、不崩错。
直接用 change 事件监听 radio 组，配合 dataset 或 ID 映射控制显隐，是最稳、最易扩展的方式。硬写多个 onclick 或拼接 ID 字符串（比如 "#custom_" + value）容易出错，且无法应对初始未选中或动态插入的场景。
为什么不能只靠 onclick 或页面加载时读取 :checked
单选按钮初始可能没被选中，document.querySelector('input[name="group"]:checked') 会返回 null，后续读 .value 就报 Cannot read property 'value' of null。而 onclick 在用户切换选项时可能不触发（比如空点已选中的项），导致状态不同步。必须用 change 事件——它只在真正“选中状态改变”时触发，语义准确。
- 仅在用户切换到不同选项时触发，避免重复执行
- 兼容键盘操作（Tab + 空格）和屏幕阅读器
- 不会因初始无选中项而崩掉
用 data-id 关联内容区块最安全
别让 JS 去猜 ID 规则（比如 "custom_" + e.target.value），一改后端字段名就全挂。给每个 input[type="radio"] 加 data-id 属性，值直接对应目标 div 的 id，解耦清晰。
<input type="radio" name="plan" value="1" data-id="basic-plan"><div id="basic-plan" class="plan-section">...</div>- JS 里直接用
e.target.dataset.id拿到要显示的 ID，不用字符串拼接
隐藏/显示逻辑必须批量处理同组区块
每次 change 触发时，先统一隐藏所有同组关联区块，再单独显示当前选中的那个。否则旧区块残留可见，状态错乱。
- 用
document.querySelectorAll(`[name="${groupName}"]`)找到整组 radio - 遍历它们，用
radio.dataset.id找到对应div，设hidden = true - 最后对当前
e.target.dataset.id对应的div设hidden = false - 用
hidden属性比操作style.display更语义化、更易调试
事件委托适合多组共存的复杂表单
如果页面有 “支付方式”、“发票类型”、“客户来源” 多组 radio，每组都要控制不同区块，别给每组单独写监听器。把监听器挂到公共父容器上，靠 e.target.matches() 过滤：
document.querySelector('.form-container').addEventListener('change', (e) => {
if (!e.target.matches('input[type="radio"][data-id]')) return;
const targetId = e.target.dataset.id;
const groupName = e.target.name;
// 隐藏同组所有区块
document.querySelectorAll(`[name="${groupName}"]`).forEach(radio => {
const el = document.getElementById(radio.dataset.id);
if (el) el.hidden = true;
});
// 显示当前选中项对应区块
const currentEl = document.getElementById(targetId);
if (currentEl) currentEl.hidden = false;
});
这样新增一组 radio 只需加 HTML，JS 逻辑零修改。最容易被忽略的是：忘了给目标 div 加初始 hidden，或者漏写了 data-id 和 id 的严格一致——差一个字母，整个逻辑就静默失效，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
