做问卷页时绑了五个单选题，测试说每个选项都能选中，明明长得是单选框，行为却像复选框。我翻代码一看，五个 input 的 name 各写了一串，互不相干，问题就出这儿。

同组必须同一个 name

浏览器的规则很简单：radio 类型里，name 相同的算一组，组内只能选一个。name 不同，每项自成一组，自然就都能选。名字里带中括号也没关系，只要字符串一致就行：

<input type=radio name=gender value=m>男
<input type=radio name=gender value=f>女

value 才是真正提交给后端的内容，标签里的男、女只是给人看的文字。

想要默认选中就加 checked

加个 checked 属性就行，不用写等于什么：

<input type=radio name=gender value=m checked>男

一组里多个都写了 checked，浏览器只认最后一个。要是想用脚本控制，改的是 el.checked 这个布尔属性，不是给 radio 改 value。

取值和校验的常用写法

  • 取值：querySelector 找 name 加 :checked，读它的 value
  • 必填校验：配合 required，点提交时浏览器自动拦
  • 动态生成选项：改完 DOM 后 name 要提前定好，别用索引拼
  • 和 label 联动：把 input 包进 label，或者用 for 指到 id，点文字也能选

外观改不了怎么办

原生圆点样式各浏览器不一，产品要自定义样式时，常见做法是给 input 加 appearance none 隐藏原控件，再用伪元素画个圈。注意别用 display none，那样键盘没法聚焦，无障碍就废了，用视觉隐藏的写法保留焦点。

说白了，radio 的所有诡异行为，先查 name 是不是同一组，九成的「能多选」和「选不中」都出在这里。