HTML原生单选按钮不支持取消勾选，必须用checkbox模拟并手动控制单选逻辑：点击已选项清空选择，配合CSS伪元素还原radio样式，确保无障碍和表单语义。
HTML原生单选按钮不支持取消勾选
标准的 <input type="radio"> 设计就是「单选互斥」：一旦选中，必须通过点击另一个同 name 的选项来切换，无法再次点击已选项取消。这是浏览器规范行为，不是 bug，也不存在跨浏览器兼容写法能直接启用“点击取消”。
用 checkbox 模拟 radio 行为 + 手动控制
最可靠、可控的方式是改用 <input type="checkbox">，再用 JS 管理「单选逻辑」，同时允许点击已选项清空选择：
<label><input type="checkbox" name="choice" value="a" class="radio-like"> 选项 A</label> <label><input type="checkbox" name="choice" value="b" class="radio-like"> 选项 B</label> <label><input type="checkbox" name="choice" value="c" class="radio-like"> 选项 C</label>
对应 JS（需确保同一组 name 值唯一）：
document.querySelectorAll('input.radio-like').forEach(el => {
el.addEventListener('change', function() {
if (this.checked) {
// 取消同组其他项
document.querySelectorAll(`input[name="${this.name}"]`).forEach(other => {
if (other !== this) other.checked = false;
});
}
// 若未 checked，说明是点击已选项 → 什么也不做，保留取消状态
});
});
- 关键点：只在
this.checked === true时才同步取消其他项；若用户点击已选中的 checkbox，change事件仍会触发，但此时this.checked是false，不执行任何操作 → 达成「点击取消」 - 注意不要用
click事件替代change，否则可能在 checkbox 状态未更新前就读取错误值 - 如果需要表单提交时保持
name语义，后端需适配接收空值或忽略未提交的字段
CSS 隐藏 checkbox 并用伪元素模拟 radio 样式
为了视觉上仍是圆圈单选样式，需覆盖默认 checkbox 外观：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
input.radio-like {
position: absolute;
opacity: 0;
cursor: pointer;
}
input.radio-like + label::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
input.radio-like:checked + label::before {
background-color: #007bff;
border-color: #007bff;
}
input.radio-like:checked + label::after {
content: '•';
color: white;
font-size: 12px;
position: relative;
left: 2px;
top: -1px;
}
- 必须用
opacity: 0而非display: none或visibility: hidden，否则失去焦点和可访问性 -
::before绘制外圈，::after绘制内点，比仅靠 background 实现更易控制对齐 - 无障碍方面，
label必须显式包裹 input 或用for关联，否则屏幕阅读器无法识别操作目标
React/Vue 等框架里别硬套原生 radio
在受控组件场景下，强行给 <input type="radio"> 绑定 checked={value === selected} 并试图响应点击取消，会导致 React 报错或行为异常（比如点击已选项后 state 不变但 UI 闪烁）。正确做法是：
- 用
useState或ref管理当前选中值（如const [selected, setSelected] = useState(null)） - 每个选项的
onChange回调里判断：若event.target.value === selected，则setSelected(null)；否则设为新值 - 渲染时用
type="checkbox"或纯<div>+ 类名控制视觉状态，避免和原生 radio 机制冲突
浏览器不会帮你绕过 radio 的底层约束，所有“取消”能力都得从交互层重新建模——这点容易被忽略，尤其当后端接口要求字段必填时，前端清空反而会引发校验失败。
