radio默认不支持取消选中，这是HTML规范强制要求的原生行为；可通过JavaScript点击时清空checked并手动重置同name组其他项，或用label+CSS伪元素模拟实现可取消效果，但需注意表单提交时该字段可能完全缺失。
radio默认不支持取消选中，这是浏览器原生行为
HTML规范里明确要求<input type="radio">在同一个name组内必须始终有一个被选中——哪怕用户点掉当前项，浏览器也不会清空，而是保持上一个选中的状态。这不是bug，是设计如此。所以“取消选中”本质是绕过原生限制的模拟方案。
用JavaScript监听点击并手动清除checked
最直接的做法是在点击时判断是否已选中：如果点了当前已选中的那个，就把它设为checked = false。但要注意触发时机和事件冒泡问题：
- 必须用
click事件（change太晚，此时已无法阻止选中） - 需要区分「首次点击」和「重复点击同一项」，可用
element.checked判断 - 避免多次绑定，建议用事件委托或单次初始化
document.querySelectorAll('input[type="radio"]').forEach(radio => {
radio.addEventListener('click', function(e) {
if (this.checked) {
// 点的是自己且当前已选中 → 清除
this.checked = false;
// 注意：此时同name组其他radio仍保持checked，需手动清空
document.querySelectorAll(`input[type="radio"][name="${this.name}"]`)
.forEach(r => r !== this && (r.checked = false));
}
});
});
用label包裹+CSS隐藏原生radio，改用伪元素模拟
更健壮的方式是彻底放弃原生交互逻辑，用<label>作为点击区域，把input设为display: none，再用::before或::after画出圆圈状态。这样「取消」就是纯CSS切换：
- 每个
label绑定唯一for指向id，点击不影响原生radio状态 - 用
:checked伪类控制样式，再加一个.unchecked类来表示“主动取消”状态 - JS只负责切换
class，不碰checked属性，规避浏览器强制校验
关键点在于：你得在JS里显式管理“当前选中项”的状态变量，而不是依赖input.checked。
立即学习“前端免费学习笔记（深入）”；
服务端/框架场景下注意表单提交值为空的问题
当用户“取消”了所有radio，实际提交时该name字段会完全不出现在FormData或查询参数中——这和checkbox未勾选不同，radio没有“未选中值”的概念。后端收到空值是正常的，但容易误判为字段缺失：
- 若业务逻辑要求“必须有值”，应在前端校验并提示，而不是依赖radio自身约束
- Vue/React等框架中，别直接用
v-model或value双向绑定到radio，要额外维护一个可为空的响应式变量 - 提交前检查
new FormData(form).get('xxx')是否为null，比检查input.checked更可靠
真正麻烦的不是怎么点掉，而是后续所有依赖这个值的地方都要接受它可能根本不存在。
