移动端点击单选按钮需双击才能生效，是因标签未正确绑定或事件冒泡延迟所致；通过为包裹标签添加显式点击监听并手动触发 radio 的 click 事件，可实现单击即响应，彻底解决交互迟滞问题。
移动端点击单选按钮需双击才能生效，是因标签未正确绑定或事件冒泡延迟所致；通过为包裹标签添加显式点击监听并手动触发 radio 的 click 事件，可实现单击即响应，彻底解决交互迟滞问题。
在移动端 Web 表单中， 常因标签（
根本原因在于：
你当前的 HTML 中虽使用了
✅ 推荐解决方案：主动接管 label 点击行为
将每个 .container（即包裹 radio 的 label）视为统一点击入口，监听其 click 事件，并显式调用内部 radio 的 .click() 方法——该方法会立即触发原生选中逻辑，绕过模糊的触摸目标判定：
// 在页面加载完成后执行（确保 DOM 已就绪）
document.addEventListener('DOMContentLoaded', function () {
const labels = document.querySelectorAll('.container');
labels.forEach(label => {
label.addEventListener('click', function (e) {
// 阻止默认行为（避免重复触发或跳转干扰）
e.preventDefault();
// 定位内部 radio 元素
const radio = this.querySelector('input[type="radio"]');
if (radio && !radio.disabled) {
radio.checked = true; // 显式设为选中（更可靠于 .click()）
myFunction(); // 同步更新链接
}
});
});
});? 为什么用 radio.checked = true 而非 radio.click()？
在某些 iOS 版本中，click() 可能被事件委托或 CSS pointer-events 干扰；直接赋值 checked 属性更底层、更稳定，且会自动触发 change 事件，兼容所有现代浏览器。
同时优化 HTML 结构（强烈建议）：
确保每个 radio 拥有唯一、正确的 id，且 label 的 for 属性严格匹配。例如：
<label for="monthly" class="container"> <input type="radio" id="monthly" name="payment" value="monthly" checked> <span class="checkmark-monthly-yearly"></span> <!-- 其余内容... --> </label>
避免将 深埋于多层 div 中——将其置于 label 直接子级，或至少保证 label > input 的层级关系，大幅提升可访问性与触控精度。
额外注意事项：
- 移除 标签上的 onclick="myFunction()"，改由上述 JS 统一控制，避免重复调用或时机错乱；
- 为 .container 添加 cursor: pointer 和足够点击热区（最小 44×44px），符合 WCAG 移动端触控标准；
- 若使用框架（如 React/Vue），应优先通过状态管理驱动 radio 选中，而非直接操作 DOM。
通过以上改造，用户在手机上轻点任意套餐卡片区域即可即时选中对应 radio，并实时更新 #myLink 的 href，交互流畅无延迟，显著提升转化体验。
