name属性必须完全一致才能构成互斥组，浏览器仅依据name值（ASCII大小写敏感）判断单选按钮分组，与id、class、位置无关；label需正确绑定才支持点击文字选中；checked与required需合理配合；服务端仅接收一个value字符串，name须语义唯一防冲突。
name属性必须完全一致才能构成互斥组
浏览器只靠name值判断哪些<input type="radio">属于同一组，不看id、class、位置或样式。哪怕两个按钮一个在<header>、一个在<footer>，只要name值完全相同（ASCII大小写敏感），它们就自动互斥。
常见错误包括：
-
name="gender"和name="Gender"被视为两组，可同时选中 - 漏写
name（即<input type="radio">没带name属性），每个按钮自成一组 - 拼写错误，比如
name="paymet_method"vsname="payment_method" - 前后多空格或下划线，如
name=" theme "≠name="theme"
调试时直接打开 Elements 面板，Ctrl+F 搜 name="xxx"，确认所有目标<input>都被命中——这是最快速的验证方式。
label没绑定会导致点击文字无效
单选按钮本身没有可见文本，value只是提交值，不是显示内容。用户点击“男”“女”却没反应，大概率是<label>没正确关联到<input>。
立即学习“前端免费学习笔记（深入）”；
两种可靠写法：
-
<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必须语义唯一且作用域隔离。
