先记住这个答案
一组单选按钮要使用相同的 name,浏览器才会让它们互斥。选择“快递”后,“自提”会自动取消;提交时以该组名字传递被选中项的 value。同组多个单选项都写 checked 作为初始状态时,解析到后面的选中项通常覆盖前面的,所以标记里应只给一个默认项。
- 同组单选框共用
name - 一次只能选中一个
- 多个初始
checked通常最后一个生效 - 提交的是选中项的
value
配送方式要共享一个名字
订单表单里“快递”和“自提”是同一个问题的两个答案,应该使用相同 name、不同 value。标签文本面向用户,value 面向提交数据,两者不必相同。
<fieldset>
<legend>配送方式</legend>
<label><input type="radio" name="delivery" value="express" checked> 快递</label>
<label><input type="radio" name="delivery" value="pickup"> 自提</label>
</fieldset>用户未操作时默认快递;改选自提后,该组只会有一个选中项。<fieldset> 和 <legend> 进一步说明这些按钮回答同一个问题,辅助技术用户也更容易理解分组。
如果同页还有“付款方式”,它必须使用另一组名字。误把付款选项也写成 delivery,选择付款方式就会取消配送方式。
默认值与必填校验
多个 checked 并不能表示允许多选。解析页面时,同组只有一个最终选中项;后出现的标记可能覆盖前面的初始状态。若要让用户明确选择,可以不设默认项,并给组中的一个单选项加 required 约束。
用脚本动态创建或移动单选框时,还要考虑其表单所有者。相同 name 但属于不同表单的单选按钮,不应当成一组业务答案。
同一组单选按钮必须共用 name,不同组则要用不同名字。比如配送方式与支付方式都写 name="method",用户选了支付宝后配送选项会被取消,提交数据也只剩一组值。required 用在一组中的某个单选按钮上,就要求这一组至少选中一个;不需要给每一项都重复标。服务端也要检查提交值在允许列表内,因为客户端可以绕过页面直接传入不存在的选项。
容易答错的地方
- 不同问题复用相同的
name - 浏览器会把它们当一组互斥选项,导致用户填一题时取消另一题。
- 以为多个
checked就能多选 radio是单选。需要多个答案时使用复选框,并用合适的数据结构收集值。
面试官还会怎么问?
没有选中项时会提交什么?
该组通常没有对应的成功值提交;若必须作答,用 required 并提供明确提示。
只给其中一个 radio 写 required 有用吗?
单选组的必填校验按同名组处理,任一组成员满足选中条件即可。
为什么推荐 <fieldset>?
它为一组相关控件提供语义容器,<legend> 说明整组问题,比仅靠相邻文字更清楚。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。