必须用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 虽然延迟一点，但兼容性更好。实际项目中建议降级处理：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• PC 端用 onmousedown，移动端用 onclick（可通过 matchMedia 或 UA 粗略判断）
• 或统一用 onclick + event.preventDefault()，并在事件后加 setTimeout(() => { input.checked = true }, 0) 来绕过部分浏览器的同步锁定
• 不要依赖 event.target.checked 判断当前状态——它在 preventDefault() 后仍是旧值，应查 DOM 实际属性或用缓存变量

[name="${el.name}"]:checked

真实场景里，用户快速连点、表单有初始值、或者 JS 加载晚于 HTML 渲染，都可能导致 lastChecked 失效。最保险的做法是在每次点击前重新查一次当前选中项，而不是依赖一个全局变量长期维护状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！