radio默认不支持取消选中，这是HTML规范强制单选的设计特性；清空需用JavaScript遍历同name所有元素设checked=false；推荐添加value=""的“不选择”项作为语义化解决方案。
radio默认不支持取消选中，这是浏览器原生行为
HTML规范里的设计目标就是“在一组中强制选中且仅选中一个”，所以没有原生的“取消全部”机制。你点掉已选中的radio，它会自动回弹——这不是bug，是spec规定的行为。
用JavaScript手动清空radio组的checked状态
必须通过脚本干预DOM，把同name值的所有radio的checked属性设为false。注意不是只操作当前元素，而是整组：
// 清空 name="gender" 的所有 radio
document.querySelectorAll('input[type="radio"][name="gender"]').forEach(r => r.checked = false);
- 一定要用
querySelectorAll查整组，不能只对点击的元素赋false - 不要用
removeAttribute('checked')，这在部分浏览器（如旧版Safari）可能失效 - 如果radio是动态生成的，需确保执行时机在DOM就绪后，或绑定到事件委托
加个“无选项”radio作为显式取消入口
最符合用户直觉的做法：在radio组末尾加一个值为空或value="none"的选项，并给它一个明确文案（如“不选择”）。用户点它，就等于逻辑上“取消”：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<input type="radio" name="color" value="red"> 红色<br><input type="radio" name="color" value="blue"> 蓝色<br><input type="radio" name="color" value=""> 不选择
- 这个“不选择”项的
value建议设为空字符串，后端接收时容易判断 - 若需视觉上弱化它（比如灰色文字），用CSS控制
input[type="radio"]:nth-last-of-type(1) + label - 别用
disabled，否则无法触发选中，起不到取消作用
用CSS+JS模拟可取消的视觉效果（慎用）
有人尝试用appearance: none隐藏原生radio，再用伪元素画个可切换的圆圈。但要注意：
- 必须同步维护
checked状态和自定义样式，否则表单提交时值丢失 - 键盘导航（Tab + Space）会失效，需手动补全
keydown事件处理 - 移动端点击区域变小，易误触，不如直接加“不选择”项来得稳妥
真正需要“取消”能力的场景，几乎都该回归语义化设计——让用户有明确的“无选项”可点，而不是对抗原生radio的行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
