多复选框联动与输入回显问题：递归溢出错误排查

问题根源 #

这个错误是因为父子复选框的联动逻辑中存在无限循环触发事件：勾选父复选框时自动勾选子复选框，而子复选框的change事件又反过来触发父复选框的状态更新，循环往复导致调用栈溢出。

修复方案 #

1. 给事件触发加开关，阻断循环调用 #

在联动逻辑中加入临时开关，标记当前是否正在执行联动操作，防止事件重复触发：

// 全局开关，控制联动逻辑的触发状态
let isUpdating = false;

// 父复选框联动子复选框
document.querySelectorAll('.parent-checkbox').forEach(parent => {
  parent.addEventListener('change', function() {
    if (isUpdating) return;
    isUpdating = true;
    
    const children = this.closest('.checkbox-group').querySelectorAll('.child-checkbox');
    children.forEach(child => {
      child.checked = this.checked;
      // 触发子复选框change事件但不冒泡，避免循环
      child.dispatchEvent(new Event('change', { bubbles: false }));
    });
    
    isUpdating = false;
    updateInputValue(this.closest('.popup'));
  });
});

// 子复选框联动父复选框
document.querySelectorAll('.child-checkbox').forEach(child => {
  child.addEventListener('change', function() {
    if (isUpdating) return;
    isUpdating = true;
    
    const parent = this.closest('.checkbox-group').querySelector('.parent-checkbox');
    const allChildren = this.closest('.checkbox-group').querySelectorAll('.child-checkbox');
    const allChecked = Array.from(allChildren).every(c => c.checked);
    const noneChecked = Array.from(allChildren).every(c => !c.checked);
    
    if (allChecked) {
      parent.checked = true;
    } else if (noneChecked) {
      parent.checked = false;
    } else {
      parent.indeterminate = true; // 设置半选状态
    }
    
    isUpdating = false;
    updateInputValue(this.closest('.popup'));
  });
});

2. 给弹窗添加唯一标识，确保独立处理 #

用data-*属性区分不同弹窗，操作时只影响当前弹窗对应的输入框：

<!-- 弹窗结构添加唯一ID标识 -->
<div class="popup" data-popup-id="popup1">
  <div class="checkbox-group">
    <input type="checkbox" class="parent-checkbox" value="p1"> 父选项1
    <input type="checkbox" class="child-checkbox" value="c1-1"> 子选项1-1
    <input type="checkbox" class="child-checkbox" value="c1-2"> 子选项1-2
  </div>
  <button class="ok-btn">OK</button>
</div>
<input type="text" data-input-for="popup1" readonly>

<button class="select-btn" data-target="popup1">Select</button>

// 更新输入框值的函数，匹配对应弹窗的输入框
function updateInputValue(popupElement) {
  const popupId = popupElement.dataset.popupId;
  const input = document.querySelector(`[data-input-for="${popupId}"]`);
  const checkedIds = Array.from(popupElement.querySelectorAll('input[type="checkbox"]:checked'))
    .map(cb => cb.value)
    .join(', ');
  input.value = checkedIds;
}

// 弹窗显示/隐藏控制
document.querySelectorAll('.select-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const targetPopupId = this.dataset.target;
    const popup = document.querySelector(`[data-popup-id="${targetPopupId}"]`);
    popup.style.display = 'block';
  });
});

document.querySelectorAll('.popup .ok-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    this.closest('.popup').style.display = 'none';
  });
});

3. 优化回显逻辑，避免触发循环事件 #

打开弹窗回显已选ID时，直接修改复选框状态而非触发change事件：

// 弹窗回显函数，打开弹窗时调用
function loadPopupSelection(popupId, selectedIds) {
  const popup = document.querySelector(`[data-popup-id="${popupId}"]`);
  const checkboxes = popup.querySelectorAll('input[type="checkbox"]');
  
  isUpdating = true; // 开启开关，阻止事件触发
  checkboxes.forEach(cb => {
    cb.checked = selectedIds.includes(cb.value);
  });
  // 手动更新父复选框的全选/半选状态
  const parentCheckboxes = popup.querySelectorAll('.parent-checkbox');
  parentCheckboxes.forEach(parent => {
    const children = parent.closest('.checkbox-group').querySelectorAll('.child-checkbox');
    const allChecked = Array.from(children).every(c => c.checked);
    const noneChecked = Array.from(children).every(c => !c.checked);
    parent.checked = allChecked;
    parent.indeterminate = !allChecked && !noneChecked;
  });
  isUpdating = false; // 关闭开关
  
  updateInputValue(popup);
}

关键要点 #

• 阻断循环触发：通过开关变量拦截递归触发的事件
• 隔离弹窗作用域：用data-*属性区分不同弹窗，确保操作互不干扰
• 手动控制状态：批量更新或回显时直接修改复选框状态，减少不必要的事件触发

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