先记住这个答案
互斥答案用同名的 radio 组成一组，多选答案用独立的 checkbox；浏览器提交时只发送符合成功控件规则的选中项。若问题是“你使用哪些框架”，多个勾选值可能需要同名字段；若是“主要使用哪一个”，单选更符合任务。控件的 name 管分组与提交，给整组起可见名称还要用 <fieldset> 和 <legend>。
- 同名 radio 构成单选组
- checkbox 可多项勾选
name还是提交字段名fieldset可说明整组问题
配送方式与通知偏好
问卷里“配送方式”只能选快递或自提，用同名 radio；“希望收到哪些通知”可同时选短信和邮件，用 checkbox。每个选项都要有对应 <label>，点击文字也能选中。把 radio 写成不同 name，用户就会发现两个配送方式可以同时选；把 checkbox 当成 radio，又会无意限制多选需求。
<fieldset>
<legend>配送方式</legend>
<label><input type="radio" name="delivery" value="post">快递</label>
<label><input type="radio" name="delivery" value="pickup">自提</label>
</fieldset>
<label><input type="checkbox" name="notify" value="sms">短信通知</label>同组 radio 的选择状态互相排斥，组别由表单归属与 name 决定。
示例里两项配送方式共用 name="delivery"，浏览器才知道它们互斥；通知选项用另一个 name，不会影响配送选择。若两个 radio 的 name 不同，就可能同时被选中，表面看起来仍像单选按钮却失去题意。反过来，多个可独立选的通知方式若全写成 radio，用户就只能留一个。先确定业务允许几项，再决定控件，而不是先照设计稿画圆点或方框。
同名 radio 互斥，checkbox 独立
checkbox 则各自维护 checked，即使共享一个提交字段名，也仍可同时勾选；提交时可能出现多个同名值，服务端要按约定解析。未选中的 radio 和 checkbox 一般不会作为成功控件提交，因此服务端不能把“没有这个字段”误当成合法的某个选择。fieldset 和 legend 让题目与选项形成语义组。
同名 radio 的互斥关系属于同一个表单范围；复制组件时若所有单选题都误用 name="choice"，第一题选项可能会把第二题的选中状态取消。给每道题分配不同 name，并用 <legend> 提问，才能让视觉和读屏用户都知道这组控件在回答什么。复选框虽然能多选，也要决定服务端如何接收重复字段或数组值。
“其他”选项需要额外填写时，单选按钮负责选择是否为其他，文本输入负责收集具体内容；不能把输入框直接当成一个神奇的单选值。选中状态改变后还应同步启用或禁用附属输入，服务端根据选中的选项判断是否接收额外字段。这样比提交所有字段后靠空字符串猜用户意图更清楚。
容易答错的地方
- 以为 radio 只因 type 就自动互斥
- 不同
name会形成不同组，不能完成同一道单选题的互斥。 - 用 checkbox 实现只能选一个的题
- 即使脚本强行取消其他项，语义仍不如 radio 清楚。
面试官还会怎么问？
多个 checkbox 用同一个 name 会怎样？
它们仍可独立选中，提交时可能带多个同名字段值。
没选任何选项会提交什么？
未选中的 radio 与 checkbox 通常不会提交对应字段，服务端应处理缺失。
为什么需要 fieldset？
它把一组相关控件和题目关联起来，读屏用户能更清楚地理解选项上下文。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。