多分区Checkbox独立全选功能失效问题排查求助

你的代码存在5个关键错误，导致分区全选功能失效，以下是问题点和修复后的完整代码：

错误点说明 #

• 未定义变量引用：全选事件里误用了不存在的selectAllCheckbox，应该用当前循环的checkbox变量获取选中状态
• 元素选择器错误：获取分区时，原代码直接用#${checkbox.id.split('-')[2]}生成#1这类无效选择器，正确应该拼接成#section-${数字}
• Checkbox选择范围错误：原代码会把分区内的全选框也纳入批量选中范围，需要精准选择客户选项框
• NodeList不支持数组方法：querySelectorAll返回的是NodeList，不能直接用filter，需先转为数组
• 选择器与HTML不匹配：JS里用name^="customer-code-section-"选择客户Checkbox，但HTML里的name是customer-code，导致无法获取客户选项

修复后的完整代码 #

JavaScript 代码 #

const selectAllCheckboxes = document.querySelectorAll('input[id^="select-all-section-"]');
const customerCodeCheckboxes = document.querySelectorAll('input[name="customer-code"]');
const submitButton = document.querySelector('#submit-button');

// 为每个分区全选框绑定事件
selectAllCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('click', () => {
    // 正确获取对应分区元素
    const sectionNum = checkbox.id.split('-')[2];
    const sectionElement = document.querySelector(`#section-${sectionNum}`);

    // 仅选择分区内的客户Checkbox
    const sectionCustomerCheckboxes = sectionElement.querySelectorAll('input[name="customer-code"]');
    
    // 使用当前全选框的状态控制子选项
    sectionCustomerCheckboxes.forEach(cb => {
      cb.checked = checkbox.checked;
    });
  });
});

// 提交按钮事件
submitButton.addEventListener('click', () => {
  // 将NodeList转为数组后再筛选
  const selectedCustomerCodeIds = Array.from(customerCodeCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  console.log('Selected customer code IDs:', selectedCustomerCodeIds);
});

HTML 代码 #

<h1>Checkbox and Select All</h1>

<div id="section-1">
  <h2>Section 1</h2>
  <input type="checkbox" id="select-all-section-1">
  <label for="select-all-section-1">Select All</label>
  <ul id="customer-codes-section-1">
    <li><input type="checkbox" name="customer-code" value="HAN01">HAN01</li>
    <li><input type="checkbox" name="customer-code" value="HAN02">HAN02</li>
    <li><input type="checkbox" name="customer-code" value="HAN03">HAN03</li>
    <li><input type="checkbox" name="customer-code" value="HAN04">HAN04</li>
  </ul>
</div>

<div id="section-2">
  <h2>Section 2</h2>
  <input type="checkbox" id="select-all-section-2">
  <label for="select-all-section-2">Select All</label>
  <ul id="customer-codes-section-2">
    <li><input type="checkbox" name="customer-code" value="ABC01">ABC01</li>
    <li><input type="checkbox" name="customer-code" value="ABC02">ABC02</li>
    <li><input type="checkbox" name="customer-code" value="ABC03">ABC03</li>
    <li><input type="checkbox" name="customer-code" value="ABC04">ABC04</li>
    <li><input type="checkbox" name="customer-code" value="ABC05">ABC05</li>
  </ul>
</div>

<button type="button" id="submit-button">Submit</button>

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