单选按钮组的 name 属性必须一致才能互斥；每个 radio 需唯一 value，用 label 包裹提升可点击性；隐藏原生控件并用伪元素定制样式；提交前须 JS 校验是否已选，避免 name 冲突导致取值错误。
单选按钮组的 name 属性必须一致
浏览器靠 name 识别哪些 <input type="radio"> 属于同一组，只有同名才能互斥。漏写或拼错 name 是最常见问题——看着像单选，点来点去却能多选。
实操建议：
- 所有支付方式
<input>的name设为相同值，比如payment_method - 每个
<input>必须有唯一value，后端靠它区分微信/支付宝/银行卡 - 别用
id替代name，id只用于关联<label></label>
用 <label></label> 包裹提升点击体验
纯靠点击小圆圈太难操作，尤其在移动端。把 <input> 套进 <label></label> 或用 for 关联，整个文字+图标区域都可点。
推荐写法（语义清晰、无障碍友好）：
立即学习“前端免费学习笔记（深入）”；
<label> <input type="radio" name="payment_method" value="wechat" checked> 微信支付 </label> <label> <input type="radio" name="payment_method" value="alipay"> 支付宝 </label>
注意：checked 只能出现在一个选项上，否则默认状态混乱。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
样式定制别直接改 input，用伪元素或隐藏原生控件
原生单选按钮样式难以统一，但直接设 appearance: none 在 Safari 旧版可能失效，且无障碍支持变差。
稳妥做法：
- 保留原生
<input>（带name和value），设position: absolute; opacity: 0隐藏它 - 用
<label></label>的::before或额外<span></span>绘制自定义圆圈和勾选状态 - 通过
input:checked + span或 JavaScript 监听change事件同步视觉状态
提交前必须校验是否已选，不能只靠 required
required 属性对单选组有效，但仅在表单提交时触发，用户可能根本没点“提交”按钮，而是直接关页或跳转。JS 主动校验更可靠。
简单校验逻辑：
const selected = document.querySelector('input[name="payment_method"]:checked');
if (!selected) {
alert('请选择一种支付方式');
return false;
}
console.log('选中：', selected.value); // 如 'wechat'
容易被忽略的点：如果页面有多个单选组（比如“支付方式”+“发票类型”），name 冲突或查询范围写错，:checked 就会取错值。
