name属性必须完全一致才能构成互斥组，浏览器仅依据name值（ascii大小写敏感）判断单选按钮分组，与id、class、位置无关；label需正确绑定才支持点击文字选中；checked与required需合理配合；服务端仅接收一个value字符串，name须语义唯一防冲突。

name属性必须完全一致才能构成互斥组

浏览器只靠name值判断哪些<input type="radio">属于同一组，不看id、class、位置或样式。哪怕两个按钮一个在<header></header>、一个在<footer></footer>，只要name值完全相同（ASCII大小写敏感），它们就自动互斥。

常见错误包括：

• name="gender" 和 name="Gender" 被视为两组，可同时选中
• 漏写name（即<input type="radio">没带name属性），每个按钮自成一组
• 拼写错误，比如name="paymet_method" vs name="payment_method"
• 前后多空格或下划线，如name=" theme " ≠ name="theme"

调试时直接打开 Elements 面板，Ctrl+F 搜 name="xxx"，确认所有目标<input>都被命中——这是最快速的验证方式。

label没绑定会导致点击文字无效

单选按钮本身没有可见文本，value只是提交值，不是显示内容。用户点击“男”“女”却没反应，大概率是<label></label>没正确关联到<input>。

两种可靠写法：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• <label><input type="radio" name="gender" value="male"> 男</label>（嵌套写法，无需id）
• <input id="female" type="radio" name="gender" value="female"><label for="female">女</label>（分离写法，for必须严格匹配id）

❌ 错误示例：<input type="radio" name="gender" value="other"> 其他 —— 点击“其他”文字不会触发选中。

checked和required的配合容易踩坑

checked是HTML布尔属性，用于声明默认选中项；required则强制用户必须选择——但二者不能随意混用。

• 同一组里最多只能有一个checked，否则行为未定义（部分浏览器可能忽略后续的，但不可依赖）
• required加在任意一个<input type="radio">上即可，不需要每个都加
• 如果整组都没设checked，又加了required，表单提交前会弹出提示，但用户仍需手动点选
• JS动态设置时，用element.checked = true，不要用setAttribute('checked', '')（后者只影响初始状态）

服务端接收时只拿到一个value字符串

后端收到的不是数组，也不是对象，就是一个纯字符串，值来自被选中项的value属性。

• 例如：<input type="radio" name="theme" value="dark"> 被选中，POST数据里就是 theme=dark
• 如果没选中任何项且没设checked，该name根本不会出现在请求参数中（不是null或空字符串）
• PHP里$_POST['theme']直接取值；Node.js的req.body.theme也是字符串；别当成数组处理

真正容易被忽略的是：name冲突。比如把status同时用在「用户状态」和「订单状态」两组按钮上，后端一取就串了——name必须语义唯一且作用域隔离。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！