HTML原生radio不支持点击已选选项取消勾选，因其规范限定单选组内仅一选项可选且无反选逻辑；需用JS监听click事件，判断已选则设checked=false并preventDefault。
HTML原生radio不支持点击已选选项取消勾选
这是关键前提：标准HTML规范里， 的行为是「单选组内只能有一个被选中」，但**没有反选逻辑**。点击已选中的radio，什么都不会发生——它不会变回未选状态。这是浏览器默认实现，不是bug，而是设计如此。
用JavaScript手动模拟“可取消”的radio行为
实际需求中，用户常希望点一下选中、再点一下取消，尤其在表单编辑、筛选条件等场景。必须靠JS干预：
- 监听所有同name的
radio的click事件（不能用change，因为已选中时change不触发） - 判断当前点击的是否已是
checked状态 - 如果是，就调用
click()或直接设checked = false，并阻止默认行为传播（避免冲突）
示例代码（简洁版）：
<input type="radio" name="status" value="active"> 激活<br><input type="radio" name="status" value="inactive"> 停用
对应JS：
<pre class="brush:php;toolbar:false;">document.querySelectorAll('input[name="status"]').forEach(radio => {
radio.addEventListener('click', function(e) {
if (this.checked) {
this.checked = false;
e.preventDefault();
}
});
});
注意name属性和事件绑定时机
常见翻车点：
- 忘记给所有radio加相同的
name值——没name就不是一组，无法互斥，也影响JS批量获取 - JS执行太早，DOM还没加载完，
querySelectorAll返回空列表；应放在DOMContentLoaded后，或把script放body底部 - 动态插入的radio需要单独绑定，或用事件委托（监听父容器，再判断target是否为radio）
- 如果用了框架（如React/Vue），不要直接操作DOM，改用响应式数据控制
checked状态
替代方案：用checkbox + CSS伪装成radio样式
如果项目允许UI定制，更稳妥的做法是放弃原生radio，改用，然后用CSS隐藏真实控件、用伪元素画圆点样式。这样天然支持点击即切换，无需JS干预反选逻辑，兼容性和可维护性反而更好。不过要注意语义化损失，以及屏幕阅读器需额外加role="radio"和aria-checked等属性。
真正难的不是写几行JS，而是想清楚：这个“取消”操作是否符合用户心智模型？比如“性别”这种强单选字段，取消可能引发歧义；而“排序方式”“筛选状态”这类弱约束场景，可取消才更自然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
