根本原因是ios safari触摸目标判定失效：label内结构复杂且点击非文字区域时，事件无法映射到radio，退化为双击逻辑；推荐用radio.checked=true直接赋值并触发change事件，同时确保label隐式包裹radio、避免pointer-events/touch-action等css干扰。
移动端 label 点击需双击才触发 radio 的原因
根本不是浏览器 Bug，而是触摸目标判定失效：当 <label></label> 内部结构复杂（比如嵌套了 <div>、<code><span></span>），且点击位置落在非文字区域时，iOS Safari 无法可靠将事件映射到关联的 <input type="radio">。此时它退化为“模拟双击”逻辑——第一次只聚焦，第二次才选中。
用 radio.checked = true 替代 click() 更稳妥
直接赋值 checked 属性比调用 .click() 更底层、更稳定，尤其在 iOS 旧版本或存在 pointer-events 干扰时：
-
radio.click()可能被 CSS 或事件委托拦截，且不保证触发change事件 -
radio.checked = true会立即更新状态，并自动派发change，所有现代浏览器都兼容 - 若需同步执行业务逻辑（如更新 URL、切换 UI），直接写在赋值后即可，无需依赖事件监听
必须确保 label 和 radio 的 DOM 关系清晰
别依赖 for 属性和 ID 关联来“猜”绑定关系，尤其当结构动态生成或有多个同名 ID 时：
- 把 radio 放进 label 内部（隐式关联），而非靠
for="id"（显式关联） - 给包裹容器（如
<div class="container">）加 click 监听，再用 <code>this.querySelector('input[type="radio"]')定位，避免跨元素查找失败 - 检查是否有父级设置了
pointer-events: none或transform，这会让内部 radio 实际不可点 -
label或其子容器设置了touch-action: none—— 必须改为touch-action: manipulation或删掉 -
label高度由内容撑开，但内部 radio 被position: absolute移出文档流，导致可点区域为空 - 使用了
display: flex+align-items: center，但未设min-height，在某些 Android 浏览器中触发渲染错位
容易忽略的 CSS 干扰项
即使 JS 逻辑完全正确，以下样式仍会导致点击无响应：
console.log 都不会触发。
