必须用onmousedown或onclick配合preventDefault()拦截默认选中，再根据确认结果手动设置checked并恢复原选项；优先onmousedown，移动端可降级为onclick，每次操作前应重新查询当前选中项而非依赖全局缓存。
radio点击时阻止默认行为再手动控制选中状态
直接给 input[type="radio"] 绑定 onclick 并在里头 return confirm(...) 是无效的——浏览器会在事件冒泡前就完成选中，用户点完才发现已经变了，确认框成了马后炮。必须用 onmousedown 或 onclick 配合 event.preventDefault() 拦住初始动作，再根据确认结果决定是否赋值 checked。
- 优先用
onmousedown：比onclick更早触发，能更可靠地拦截原生选中逻辑 - 必须显式设置
input.checked = true（或false）来同步状态，不能只靠 DOM 属性变更 - 注意同一
name组内其他 radio 会自动取消选中，所以确认失败后得手动恢复之前选中的那个（如果有的话）
需要保存上一个选中项的引用
单选框组是互斥的，一旦新选项被 checked = true，旧选项立刻变 false。如果用户点了“取消”，你得把原来那个再设回去，否则整个组可能处于无选中状态。
- 在所有 radio 上统一监听，用一个变量缓存当前已选中的
input元素（比如let lastChecked = null） - 每次
onmousedown触发时先记下当前选中的那个（document.querySelector('[name="xxx"]:checked')），再弹确认 - 确认为
false时，把lastChecked.checked = true - 别用
value或id去查，DOM 引用最稳，避免竞态
兼容性与移动端注意事项
onmousedown 在触摸设备上不一定触发（尤其 iOS Safari），而 onclick 虽然延迟一点，但兼容性更好。实际项目中建议降级处理：
- PC 端用
onmousedown，移动端用onclick（可通过matchMedia或 UA 粗略判断） - 或统一用
onclick+event.preventDefault()，并在事件后加setTimeout(() => { input.checked = true }, 0)来绕过部分浏览器的同步锁定 - 不要依赖
event.target.checked判断当前状态——它在preventDefault()后仍是旧值，应查 DOM 实际属性或用缓存变量
<input type="radio" name="plan" value="basic" onclick="return confirmRadio(this, '确定选基础版？')">
<input type="radio" name="plan" value="pro" onclick="return confirmRadio(this, '确定选专业版？')">
<p><script>
let lastChecked = null;
function confirmRadio(el, msg) {
const current = document.querySelector(<code>[name="${el.name}"]:checked</code>);
if (!confirm(msg)) {
if (current) current.checked = true;
return false;
}
el.checked = true;
lastChecked = el;
return true;
}
</script></p>真实场景里，用户快速连点、表单有初始值、或者 JS 加载晚于 HTML 渲染，都可能导致 lastChecked 失效。最保险的做法是在每次点击前重新查一次当前选中项，而不是依赖一个全局变量长期维护状态。
立即学习“前端免费学习笔记（深入）”；
