name属性值必须完全一致才能形成有效分组,大小写、空格、连字符等任何差异均导致分组失效;value重复不影响互斥但造成语义丢失;label绑定仅扩展点击区域,不参与分组;required只需加在同组任一单选按钮上即可防止空提交。

name属性值必须完全一致才能形成有效分组
浏览器判断单选按钮是否互斥,只看name属性的字符串是否字面量相等——大小写、空格、连字符、下划线,任何差异都会导致分组失效。比如name="theme"和name="Theme"是两组;name="plan"和name=" plan"(开头有空格)也是两组;name="user-type"和name="user_type"同样不匹配。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
常见错误包括:后端接口约定接收status,前端却写了userStatus;复制粘贴时漏改某个name;模板渲染时变量未正确插值,导致部分按钮name为空或为undefined。
作用范围不是靠位置(比如是否在同一个<div>或<code><table>里)决定的,哪怕按钮分散在页面不同区域,只要<code>name相同,就属于同一组。
value值重复会导致语义丢失,但不影响互斥逻辑
两个input[type="radio"]可以共用同一个name且互斥,但如果它们的value也一样(比如都设为value="on"),提交时服务端收到的就只是name=on,无法区分用户实际点了哪个选项。
立即学习“前端免费学习笔记(深入)”;
这在动态生成表单时尤其危险:循环渲染时忘记给value赋唯一值,或误用布尔字符串(如全写value="true"而没配对value="false")。
建议:value应直接映射业务标识,例如value="vip"、value="basic";避免含空格或特殊字符(如value="VIP member"),若必须使用,需确保服务端做URL解码处理。
label绑定不影响分组,但决定点击是否生效
label标签本身不参与name分组,它的作用纯粹是扩展可点击区域。如果label没正确绑定到对应input,用户点文字就毫无反应,容易被当成 bug。
两种可靠写法:
-
<input id="opt1" type="radio" name="agree" value="yes"><label for="opt1">同意</label>(显式绑定,for必须严格等于id) -
<label><input type="radio" name="agree" value="yes">同意</label>(隐式绑定,无需id,但input必须在label内部)
千万别出现多个label都指向同一个id,或者label的for值根本不存在于任何input的id中——这种情况下,点击可能总是触发第一个 radio。
required属性只能加在一个按钮上,且仅防空提交
想强制用户二选一,只需给同组任意一个input[type="radio"]加上required即可。浏览器会阻止表单提交,并高亮提示“请填写此字段”,前提是该组当前没有任何选项被选中。
注意:required不会阻止用户取消已选中的项(除非你额外监听并禁用取消行为);它也不影响 JS 动态修改checked状态;更不能替代服务端校验。
服务端必须检查:name参数是否存在、是否为预设合法值之一、且不能接受多个同名参数(虽然 HTTP 通常只取第一个,但不能依赖这个行为)。
最易被忽略的一点:name分组是在 HTML 解析阶段就完成的,跟 JS 执行顺序、CSS display: none、或 DOM 插入时机完全无关。哪怕你用 JS 把某个 radio 改成disabled或hidden,只要它还在 DOM 中且name匹配,它就仍属于该组——只是用户暂时无法操作而已。


















