多父级场景下，如何实现勾选父复选框时自动选中所有子级复选框

Got it, let's fix this checkbox hierarchy selection behavior for you. Looking at your HTML structure, each parent checkbox lives inside a .file-item.colapse list item, and its corresponding child checkboxes are nested in the immediately following .folder-container sibling element.

Here's a straightforward native JavaScript solution that does exactly what you need: when you check/uncheck a parent checkbox, all its child checkboxes will mirror that state.

Step 1: Clean up your HTML (optional but recommended) #

First, let's tidy up your HTML structure to make it more semantic (your original code has some misplaced nested lists, but the solution will still work either way):

<ul class="folder-container">
  <li class="file-item colapse">
    <input class="fileModalCHx SWCheckBox markings" type="checkbox"> test_1
  </li>
  <ul class="folder-container">
    <li class="file-item">
      <input class="fileModalCHx SWCheckBox markings" type="checkbox" value="qqa1.txt"> qqa.txt
    </li>
    <li class="file-item">
      <input class="fileModalCHx SWCheckBox markings" type="checkbox" value="qwea1.txt"> qwea.txt
    </li>
  </ul>
</ul>

<ul class="folder-container">
  <li class="file-item colapse">
    <input class="fileModalCHx SWCheckBox markings" type="checkbox"> test_2
  </li>
  <ul class="folder-container">
    <li class="file-item">
      <input class="fileModalCHx SWCheckBox markings" type="checkbox" value="qqa.txt"> qqa2.txt
    </li>
    <li class="file-item">
      <input class="fileModalCHx SWCheckBox markings" type="checkbox" value="qwea.txt"> qwea2.txt
    </li>
  </ul>
</ul>

Step 2: Add the JavaScript functionality #

Add this script either at the end of your <body> tag or wrap it in a DOMContentLoaded listener to ensure it runs after all elements are loaded:

document.addEventListener('DOMContentLoaded', function() {
  // Grab all parent checkboxes (those inside .file-item.colapse)
  const parentCheckboxes = document.querySelectorAll('.file-item.colapse input[type="checkbox"]');

  parentCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      // Get the parent list item that contains this checkbox
      const parentListItem = this.closest('.file-item.colapse');
      // Find the next sibling folder container that holds the child checkboxes
      const childContainer = parentListItem.nextElementSibling;

      // Make sure we found the correct child container
      if (childContainer && childContainer.classList.contains('folder-container')) {
        // Get all child checkboxes inside this container
        const childCheckboxes = childContainer.querySelectorAll('input[type="checkbox"]');
        // Set each child checkbox's checked state to match the parent
        childCheckboxes.forEach(childCb => {
          childCb.checked = this.checked;
        });
      }
    });
  });
});

How this works: #

1. We wait for the DOM to fully load so we can safely select elements.
2. We target only the checkboxes that are parent items (using the .file-item.colapse class to distinguish them from child items).
3. For each parent checkbox, we listen for its change event (when it's checked or unchecked).
4. When the event fires, we find the parent's adjacent folder container that holds the child checkboxes.
5. We loop through all child checkboxes in that container and set their checked property to match the parent's state.

Bonus: Reverse functionality (optional) #

If you also want the parent checkbox to automatically check when all its children are checked, and uncheck when any child is unchecked, you can add this extra code:

// Listen for changes on child checkboxes
const childCheckboxes = document.querySelectorAll('.folder-container:not(:has(.file-item.colapse)) input[type="checkbox"]');

childCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // Find the closest parent folder container
    const childContainer = this.closest('.folder-container');
    // Get the parent checkbox (the one in the preceding .file-item.colapse)
    const parentCheckbox = childContainer.previousElementSibling.querySelector('input[type="checkbox"]');
    
    if (parentCheckbox) {
      // Get all child checkboxes in this container
      const allChildCheckboxes = childContainer.querySelectorAll('input[type="checkbox"]');
      // Check if all children are checked
      const allChecked = Array.from(allChildCheckboxes).every(cb => cb.checked);
      // Update the parent checkbox state
      parentCheckbox.checked = allChecked;
    }
  });
});

This adds two-way synchronization between parent and child checkboxes, making the interaction feel more intuitive.

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