实现3个toggle按钮不可全选：选中全部时自动随机取消一个

需求：3个toggle按钮中，若全部被选中，需自动随机关闭其中一个，不允许同时选中全部三个。
尝试用setInterval每秒检查条件，但未成功，触发时最终会关闭所有按钮。

原代码的核心问题 #

1. 状态不同步：手动维护的zval/aval/asval变量和DOM元素的checked状态没有实时同步，初始化仅赋值一次，后续修改变量后，轮询逻辑未同步更新对应变量，导致判断错误；
2. 轮询逻辑缺陷：setInterval每秒执行一次，当三个按钮全选时，每次执行都会随机关闭一个，但因状态变量未同步，下一次轮询依然判定为全选，反复执行关闭操作，最终可能把所有按钮都关掉；
3. 控件类型错误：原代码用了radio类型，radio默认同一组只能选一个，根本无法实现多选toggle的需求，应该用checkbox。

修正后的代码 #

HTML #

<div class="container">
  <div class="box">
    <input type="checkbox" id="zaid">
    <label for="zaid">Zaid</label>
  </div>
  <div class="box">
    <input type="checkbox" id="anas">
    <label for="anas">Anas</label>
  </div>
  <div class="box">
    <input type="checkbox" id="asgar">
    <label for="asgar">Asgar</label>
  </div>
</div>

JavaScript #

// 获取所有复选框元素
const checkboxes = document.querySelectorAll('.container input[type="checkbox"]');

// 给每个复选框绑定状态变化事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', handleCheckboxChange);
});

function handleCheckboxChange() {
  // 统计当前选中的复选框数量
  const checkedCount = Array.from(checkboxes).filter(box => box.checked).length;
  
  // 如果选中了3个，随机取消其中一个
  if (checkedCount === 3) {
    const randomIdx = Math.floor(Math.random() * checkboxes.length);
    checkboxes[randomIdx].checked = false;
  }
}

改进说明 #

• 替换控件类型：把radio改为checkbox，实现多选toggle功能；
• 移除手动状态变量：直接从DOM元素的checked属性获取实时状态，彻底避免不同步问题；
• 去掉轮询：改用change事件监听，每次按钮状态变化时立即检查处理，响应更及时且性能更好；
• 简化逻辑：每次状态变化后统计选中数量，达到3个时随机关闭一个，逻辑清晰不易出错。

内容的提问来源于stack exchange，提问作者MOHD ZAID