如何通过点击关联label取消已选中radio单选框的选中状态

云原生阿岚

2026-10-5

解决方案

问题原因分析

你之前的两个方案失效的核心原因如下：

事件绑定时机错误：两个方案都只在代码执行的瞬间给当前已经被选中的radio绑定事件，页面刚加载时没有默认选中的radio的话，根本不会绑定任何事件；就算有默认选中项，切换选中状态后，新的选中项也不会自动绑定事件
事件触发逻辑有问题：radio本身是隐藏状态，用户实际点击的是label元素，而且radio的默认选中行为会优先执行，你直接在click回调里设置checked=false会被默认行为覆盖，达不到取消效果
方案2额外加了ctrlKey/metaKey的判断，普通点击根本不满足触发条件，自然不会执行取消逻辑

正确实现代码

// 获取所有同name的radio元素
const menuRadios = document.querySelectorAll('input[name="megamenu"]');

menuRadios.forEach(radio => {
  // 鼠标按下时先记录当前选中状态，此时还未触发radio的默认选中行为
  radio.addEventListener('mousedown', e => {
    e.target.dataset.preChecked = e.target.checked;
  });

  // 点击时根据之前的状态判断是否要取消选中
  radio.addEventListener('click', e => {
    if (e.target.dataset.preChecked === 'true') {
      // 点击前已经是选中状态，直接取消选中
      e.target.checked = false;
    }
    // 清除临时记录的状态，避免影响后续点击判断
    delete e.target.dataset.preChecked;
  });
});