Check all checkboxes that are children of parent checkbox - multiple parents

Question

I have checkboxes that are nested in the list. How can I check all checkboxes that are children of a parent? So when the test_2 is checked qqa and qwea is checked also.

<ul class="folder-container">
  <li class="file-item colapse">
    <input class="fileModalCHx SWCheckBox markings" type="checkbox">test_1
  
  </li>
  <ul class=" folder-container" style="">
    <ul class="folder-container">
      <li class="file-item">
        <input class="fileModalCHx SWCheckBox markings" type="checkbox" value="qqa1.txt">qqa.txt
      </li>
    </ul>
    <ul class="folder-container">
      <li class="file-item">
        <input class=" fileModalCHx SWCheckBox markings" type="checkbox" value="qwea1.txt">qwea.txt
      </li>
    </ul>
  </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" style="">
    <ul class="folder-container">
      <li class="file-item">
        <input class="fileModalCHx SWCheckBox markings" type="checkbox" value="qqa.txt">qqa2.txt
      </li>
    </ul>
    <ul class="folder-container">
      <li class="file-item">
        <input class=" fileModalCHx SWCheckBox markings" type="checkbox" value="qwea.txt">qwea2.txt
      </li>
    </ul>
  </ul>
</ul>

[(javascript OR jquery) checkbox ("check all" OR "select all")](https://duckduckgo.com/?q=%28javascript+OR+jquery%29+checkbox+%28%22check+all%22+OR+%22select+all%22%29+site%3Astackoverflow.com) — Andreas, Jul 29 '22 at 10:12
I suggest you add an event listener to the parent input and getting reference to the 2 checkboxes , the callback should make it the opposite make sure you give and id to the checkbox `document.getElementById("checkbox-id").checked = true;` — Alaa Eddine Cherif, Jul 29 '22 at 10:14

score 2 · Accepted Answer · edited Aug 14 '22 at 07:35

Here is the sample provided based on your html.

Whether you use the class attribute, the relative position of the element or the id, the most important thing is that you know how to catch the parents and how to catch the corresponding children.

When you know who the children are, you can use the parent's status to update the status of the children.

const $parents =
  $('.folder-container li:first input[type=checkbox]');

$parents.on('change', function(){
  const $childes = $(this).closest('li').next('ul').find('input[type=checkbox]');
  $childes.prop('checked', $(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="folder-container">
  <li class="file-item colapse">
    <input class="fileModalCHx SWCheckBox markings" type="checkbox" >test_2
   </li>
  <ul class=" folder-container" style="">
    <ul class="folder-container">
      <li class="file-item">
        <input class="fileModalCHx SWCheckBox markings" type="checkbox" value="qqa.txt">qqa.txt
      </li>
    </ul>
    <ul class="folder-container">
      <li class="file-item">
        <input class=" fileModalCHx SWCheckBox markings" type="checkbox" value="qwea.txt">qwea.txt
      </li>
    </ul>
  </ul>
</ul>

Here is an example based on your html for multiple checkboxes.

Like I said before, when you determine who is the parent, you can easily find the corresponding child.

So just replace:
$('.folder-container li:first input[type=checkbox]');
With:
$('.folder-container .colapse input[type=checkbox]');

const $parents =
  $('.folder-container .colapse input[type=checkbox]');

$parents.on('change', function() {
  const $childes = $(this).closest('li').next('ul').find('input[type=checkbox]');
  $childes.prop('checked', $(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="folder-container">
  <li class="file-item colapse">
    <input class="fileModalCHx SWCheckBox markings" type="checkbox">test_1

  </li>
  <ul class=" folder-container" style="">
    <ul class="folder-container">
      <li class="file-item">
        <input class="fileModalCHx SWCheckBox markings" type="checkbox" value="qqa1.txt">qqa.txt
      </li>
    </ul>
    <ul class="folder-container">
      <li class="file-item">
        <input class=" fileModalCHx SWCheckBox markings" type="checkbox" value="qwea1.txt">qwea.txt
      </li>
    </ul>
  </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" style="">
    <ul class="folder-container">
      <li class="file-item">
        <input class="fileModalCHx SWCheckBox markings" type="checkbox" value="qqa.txt">qqa2.txt
      </li>
    </ul>
    <ul class="folder-container">
      <li class="file-item">
        <input class=" fileModalCHx SWCheckBox markings" type="checkbox" value="qwea.txt">qwea2.txt
      </li>
    </ul>
  </ul>
</ul>

Check all checkboxes that are children of parent checkbox - multiple parents

1 Answers1