通过为包裹单选按钮的 label 元素绑定原生 click 事件并主动触发 radio 的 click，可彻底规避移动端因 300ms 延迟导致的双击才能选中问题，提升表单交互体验。
通过为包裹单选按钮的 label 元素绑定原生 click 事件并主动触发 radio 的 click，可彻底规避移动端因 300ms 延迟导致的双击才能选中问题，提升表单交互体验。
在移动端浏览器（尤其是 iOS Safari 和部分 Android 浏览器）中，由于历史兼容性原因，存在约 300ms 的点击延迟（tap delay），用于判断用户是否执行双击缩放操作。该机制会导致 <input type="radio"> 在仅用 <label> 包裹但未正确关联时，首次点击无响应、需二次点击才生效——这正是你遇到“必须双击才能选择”的根本原因。
核心解决方案：绕过延迟，主动触发
关键不在于“禁用双击”，而在于避免依赖默认的延迟点击行为。最佳实践是：
✅ 确保每个 label 元素通过 for 属性或嵌套关系正确关联到对应 radio；
✅ 为 label 绑定 click 事件（该事件无 300ms 延迟）；
✅ 在事件处理器中显式调用 radio.click()，强制同步触发选中逻辑；
✅ 随后立即执行你的业务函数（如 myFunction()）。
以下是适配你现有 HTML 结构的完整修复代码：
// 确保 DOM 加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 选取所有带 .container 类的 label（即你的 radio 包裹容器）
const labels = document.querySelectorAll('.container');
labels.forEach(label => {
label.addEventListener('click', function(e) {
// 阻止 label 默认行为（虽通常无需，但确保安全）
e.preventDefault();
// 查找当前 label 内部的 radio 输入框
const radio = this.querySelector('input[type="radio"]');
if (radio && radio.nodeType === Node.ELEMENT_NODE) {
// 主动触发 radio 的 click，绕过 300ms 延迟
radio.click();
// 立即执行你的链接更新逻辑
myFunction();
}
});
});
});⚠️ 重要注意事项：
- 不要移除 for 属性或破坏 label–input 关联：你当前 HTML 中 <label for="monthly"> 与 <input id="monthly"> 已正确配对，这是语义化和无障碍访问的基础，务必保留。
- 避免重复绑定：确保上述脚本只执行一次，防止多次监听导致 myFunction() 被反复调用。
- myFunction() 优化建议：当前函数每次均遍历全部 radio，可优化为仅检查被点击项（利用 event.target 或 radio.value），提升性能：
function myFunction() {
const radios = document.querySelectorAll('input[name="payment"]:checked');
const link = document.getElementById('myLink');
if (radios.length === 0) return;
const value = radios[0].value;
const urls = {
'monthly': 'https://www.rageheart.co/beast-monthly',
'yearly': 'https://www.rageheart.co/beast-yearly',
'onemonth': 'https://www.rageheart.co/beast-1-month'
};
link.href = urls[value] || '#';
}最终效果：用户在手机上单次轻触任意套餐区域（label）即可立即选中 radio 并更新链接，交互流畅、符合直觉，彻底解决困惑。
