html单选框无法取消选中是规范要求，因其语义为“必须且仅选一个”；若需可清空，则应改用复选框模拟单选或添加“无选项”radio。
HTML 单选框 <input type="radio"> 不能取消选中
这是浏览器原生行为：一旦选中某个 <input type="radio">，就无法通过再次点击把它“点掉”。这不是 bug，是规范强制要求的——单选框（radio）的设计语义就是「从一组中**必须选且仅选一个**」。
所以，如果你看到用户点了又点、期望取消，那说明你用错了控件类型。真实需求往往其实是「可选可不选的单选逻辑」，这时候该换方案。
替代方案：用复选框 <input type="checkbox"> 模拟单选
当业务上需要「允许用户反悔、清空选择」时，最直接的办法是改用 <input type="checkbox">，再靠 JS 控制「同一组只允许一个勾选」。
- 给同组 checkbox 加相同
name（比如name="option"），方便识别归属 - 监听
change事件，遍历同名元素，把其他已勾选的设为checked = false - 注意：不要用
click事件，它在某些场景（如空格键触发）下不可靠；change更准确
<input type="checkbox" name="option" value="a"> A<br>
<input type="checkbox" name="option" value="b"> B<br>
<input type="checkbox" name="option" value="c"> C<br>
<script>
document.querySelectorAll('input[name="option"]').forEach(el => {
el.addEventListener('change', () => {
if (el.checked) {
document.querySelectorAll('input[name="option"]').forEach(other => {
if (other !== el) other.checked = false;
});
}
});
});
</script>
更稳妥的做法：加一个「无选项」的 radio
如果必须用 radio（比如表单后端强依赖 name 提交、且不允许字段缺失），就在那一组里显式加一个「不选任何项」的选项，比如：<input type="radio" name="status" value=""> 不指定。
立即学习“前端免费学习笔记（深入）”；
- 用户点它，就等效于“取消当前选择”
- 后端需接受空值或特殊值（如
""、"none"），并做对应处理 - 比 JS 模拟更轻量、无 JS 降级也正常，兼容性 100%
别踩坑：不要试图用 JS 强行重置 radio 的 checked
有人试过监听 click 后手动设 el.checked = false，但立刻又被浏览器拉回 true——因为 radio 的状态变更受组内约束，单独操作 DOM 属性无法绕过这个规则。
- 浏览器会强制保证：同一
name下，至少有一个 radio 是checked - 哪怕你用
el.removeAttribute('checked')或el.checked = false，只要组里还有别的 radio 是 true，它就无效 - 唯一能“清空”的时机，是所有同名 radio 都设为 false —— 但此时浏览器会自动把最后一个设为 true（取决于渲染顺序），结果不可控
这种底层机制没法 hack，硬刚只会浪费调试时间。
真正要解决的不是“怎么点掉”，而是“这个交互到底想表达什么业务意图”。多数时候，答案不在 radio 上，而在设计选择里。
