为何满足else if条件时首个if自动触发？附代码求助

数据老陈

2026-6-29

问题成因

默认行为触发额外事件：点击checkbox时，浏览器会自动切换其checked状态，而代码中手动修改checkbox.checked的操作会再次触发click事件。当你在else if分支将active设为false、checked设为false后，浏览器因状态变化触发的第二次click事件会进入第一个if分支，重新将checked设为true、active设为true，导致选中状态无法取消。
条件判断冗余：else if的条件可简化为active，但核心矛盾还是重复事件打破了状态逻辑。

解决办法

方案1：阻止默认行为，手动控制所有状态

通过event.preventDefault()禁用浏览器自动切换checkbox状态的默认行为，让代码完全掌控状态变化，避免额外事件触发：

function toggleSelectionMenu(checkbox, menu) {
  let active = false;
  document.addEventListener('click', function (event) {
    // 点击checkbox时阻止默认行为，避免自动切换checked
    if (event.target === checkbox) {
      event.preventDefault();
    }

    if (event.target === checkbox && !active) {
      checkbox.checked = true;
      menu.style.display = 'block';
      active = true;
      console.log(active);
    } else if (active) {
      checkbox.checked = false;
      menu.style.display = 'none';
      active = false;
      console.log(active);
    }
  });
}

方案2：依托原生checkbox状态，同步逻辑

放弃手动修改checked，利用浏览器默认行为控制checkbox状态，同时同步active变量，逻辑更简洁符合原生交互：

function toggleSelectionMenu(checkbox, menu) {
  let active = false;
  document.addEventListener('click', function (event) {
    if (event.target === checkbox) {
      active = checkbox.checked;
      menu.style.display = active ? 'block' : 'none';
      console.log(active);
    } else if (active) {
      checkbox.checked = false;
      menu.style.display = 'none';
      active = false;
      console.log(active);
    }
  });
}