单选按钮互斥依赖name属性完全一致（大小写、空格敏感），浏览器仅凭name识别同组；应监听change事件，动态插入时用事件委托，获取选中值前须判空。
单选按钮 name 必须一致才能互斥
浏览器靠 name 属性识别一组单选按钮是否属于同一逻辑组。如果漏写或写错 name，点击时不会取消其他选项，联动就无从谈起。
常见错误：给每个 <input type="radio"> 设置不同 name，或混用大小写（如 gender 和 Gender）。
- 所有同组单选按钮的
name值必须完全相同（包括大小写和空格） - 建议用语义化名称，如
payment_method、delivery_type - 每个
radio的value应唯一且有意义，后续 JS 会依赖它判断选中项
用 change 事件监听而非 click
change 在用户真正切换选项后才触发，而 click 可能在未改变选中状态时也触发（比如重复点同一个已选中的按钮），导致文本框误更新。
实操中直接绑定到父容器（如 <fieldset></fieldset> 或带 id 的 <div>）更稳妥，避免逐个绑定：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class='brush:php;toolbar:false;'>document.querySelector('#radio-group').addEventListener('change', function(e) {
if (e.target.type === 'radio' && e.target.name === 'plan') {
document.getElementById('desc-input').value = e.target.value === 'pro' ? '高级版，含API权限' : '基础版，限3个项目';
}
});</pre>
<ul>
<li>不要用 <code>click 替代 change，否则可能在未变化时也执行逻辑
e.target.name 是防御性写法，防止父容器内有其他控件干扰文本框值更新前先做空值/默认值处理
用户刚打开页面时，可能没有任何单选按钮被选中（尤其没设 checked），此时直接读 querySelector('input[name="x"]:checked') 会返回 null，再取 .value 就报 Cannot read property 'value' of null。
- 始终用可选链或条件判断：
const checked = document.querySelector('input[name="mode"]:checked'); const val = checked ? checked.value : 'default'; - 初始化文本框时，最好同步设置一个合理默认值，而不是留空
- 如果业务要求“必须选一项”，可在表单提交前校验，但联动逻辑本身不应强依赖初始选中态
注意 disabled 状态与 focus 行为冲突
某些设计会禁用文本框（disabled），等单选选中后再启用——但 disabled 元素无法获得焦点，也无法被用户编辑，哪怕 JS 后续设了 value，用户仍无法手动修改，容易造成困惑。
- 优先用
readonly替代disabled：保持可聚焦、可复制，仅阻止输入 - 若必须禁用，请确保联动逻辑在启用后立即设值，避免出现“启用但内容为空”的中间态
- 禁用状态下，CSS 样式（如灰色文字）应与
readonly区分开，让用户感知当前不可编辑是策略所致，而非 bug
name 或初始没设 checked，导致第一次进页面时联动脚本读不到任何值，又没兜底逻辑，文本框就一直空着。
