Safari浏览器中Checkbox模拟Radio按钮功能的change事件失效问题求助

这问题我之前做项目时也碰到过Safari的兼容性坑，给你几个经过验证的解决思路，都是基于必须用Checkbox的前提：

思路1：直接操作checked属性（最可靠） #

你之前的代码通过模拟点击父容器来取消选中，在Safari里可能因为事件触发顺序或自定义组件的事件绑定逻辑导致失效。直接修改Checkbox的checked属性更稳定：

// 建议给同一组的Checkbox加共同类名（比如.single-select-checkbox），避免影响其他Checkbox
$('.single-select-checkbox').on('change', function() {
  const $current = $(this);
  // 只取消同组其他Checkbox的选中状态
  $('.single-select-checkbox').not($current).prop('checked', false);
  
  // 如果是自定义样式的Checkbox（比如你用的.w-checkbox容器），同步更新容器的选中类
  $('.single-select-checkbox').not($current).closest('.w-checkbox').removeClass('w--checked');
  $current.closest('.w-checkbox').toggleClass('w--checked', $current.is(':checked'));
});

为什么这个方法更靠谱？因为Safari对DOM属性的直接修改响应更一致，不会受点击事件的延迟或冒泡影响。

思路2：改用原生JS处理事件 #

有时候jQuery的事件封装在Safari里会有细微差异，用原生JS写逻辑可以避免这些问题：

// 同样建议用类名分组
const checkboxes = document.querySelectorAll('.single-select-checkbox');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (!this.checked) return; // 取消当前选中时不需要处理其他
    
    checkboxes.forEach(other => {
      if (other !== this) {
        other.checked = false;
        // 同步自定义容器的选中状态
        const container = other.closest('.w-checkbox');
        if (container) container.classList.remove('w--checked');
      }
    });
    
    // 更新当前Checkbox的容器状态
    const currentContainer = this.closest('.w-checkbox');
    if (currentContainer) currentContainer.classList.add('w--checked');
  });
});

思路3：处理动态生成的Checkbox #

如果你的Checkbox是通过AJAX或其他方式动态添加到页面的，一定要用事件委托，否则新生成的元素不会绑定事件：

// jQuery事件委托写法
$(document).on('change', '.single-select-checkbox', function() {
  const $current = $(this);
  $('.single-select-checkbox').not($current).prop('checked', false);
  // 同步容器类的逻辑同上...
});

关键注意点 #

• 一定要给需要互斥的Checkbox分组（用类名或name属性），不要全局选中所有Checkbox，避免影响页面其他Checkbox组件。
• 如果使用了自定义样式的Checkbox（比如.w-checkbox这种容器），修改input的checked属性后，必须同步更新容器的选中类，否则视觉上会和实际状态不一致。

内容的提问来源于stack exchange，提问作者Brian Love