how to uncheck parent checkbox if all children checkbox is uncheck and vice versa?

Question

how to check parent checkbox if all children checkbox is check and vice versa? i'm doing this with div in the list because of the template i am using required that class for checkbox. i used parent function. its the third level i am having the problem. is it beacuse of the div i am using? also want to check the parent checkbox if aleast one child is checked please help.

$('input[type=checkbox]').click(function() {
  if (this.checked) {
    $(this).parents().parents().children('input[type=checkbox]').prop('checked', true);
    $(this).parent().parent().parent().parent().children('div').first('div').children('input[type=checkbox]').attr('checked', true);
  }
  $(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-sm-offset-2 col-sm-10">
  <ul class="list-unstyled">
    <li>
      <div class="checkbox">
        <input id="1" type="checkbox" class="checkbox">
        <label for="1">Dashboard</label>
      </div>
    </li>
    <li class="has_sub">
      <div class="checkbox">
        <input id="4" type="checkbox" class="parent">
        <label for="4">Customer</label>
      </div>
      <ul class="list-unstyled">
        <li>
          <div class="checkbox" style="margin-left: 25px;">
            <input id="4.11" type="checkbox" class="child1Gen">
            <label for="4.11">Customer List</label>
          </div>
        </li>
        <li>
          <div class="checkbox" style="margin-left: 25px;">
            <input id="4.12" type="checkbox" class="child1Gen">
            <label for="4.12">Add Customer</label>
          </div>
        </li>
      </ul>
    </li>
    <li class="has_sub">
      <div class="checkbox">
        <input id="5" type="checkbox" class="parent">
        <label for="5">Example</label>
      </div>
      <ul class="list-unstyled">
        <li>
          <div class="checkbox" style="margin-left: 25px;">
            <input id="5.1" type="checkbox" class="child1Gen">
            <label for="5.1">Example1</label>
          </div>
        </li>
        <li>
          <div class="checkbox" style="margin-left: 25px;">
            <input id="5.4" type="checkbox" class="child1Gen">
            <label for="5.4">Example2</label>
          </div>
        </li>
        <li class="has_sub">
          <div class="checkbox" style="margin-left: 25px;">
            <input id="5.5" type="checkbox" class="child1Gen">
            <label for="5.5">Example3</label>
          </div>
          <ul class="list-unstyled">
            <li>
              <div class="checkbox" style="margin-left: 50px;">
                <input id="5.5.1" type="checkbox" class="child2Gen">
                <label for="5.5.1">Example3Sub1</label>
              </div>
            </li>
            <li>
              <div class="checkbox" style="margin-left: 50px;">
                <input id="5.5.2" type="checkbox" class="child2Gen">
                <label for="5.5.2">Example3Sub2</label>
              </div>
            </li>
            <li>
              <div class="checkbox" style="margin-left: 50px;">
                <input id="5.5.3" type="checkbox" class="child2Gen">
                <label for="5.5.3">Example3Sub3</label>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

Try change event

Demo

$('input[type=checkbox]').change(function() {
  // For child cb
  let $this = $(this)

  $this.parents('li:first').find('ul input[type=checkbox]').prop('checked', this.checked)

  // For parent cb
  let $siblings = $this.parents('ul:first').children('li')
  let $checked = $siblings.find('input[type=checkbox]:checked')
  let $checkbox = $siblings.find('input[type=checkbox]')

  $this.parents('ul:first').siblings('div.checkbox').find('input[type=checkbox]').prop('checked', $checked.length === $checkbox.length)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-sm-offset-2 col-sm-10">
  <ul class="list-unstyled">
    <li>
      <div class="checkbox">
        <input id="1" type="checkbox" class="checkbox">
        <label for="1">Dashboard</label>
      </div>
    </li>
    <li class="has_sub">
      <div class="checkbox">
        <input id="4" type="checkbox" class="parent">
        <label for="4">Customer</label>
      </div>
      <ul class="list-unstyled">
        <li>
          <div class="checkbox" style="margin-left: 25px;">
            <input id="4.11" type="checkbox" class="child1Gen">
            <label for="4.11">Customer List</label>
          </div>
        </li>
        <li>
          <div class="checkbox" style="margin-left: 25px;">
            <input id="4.12" type="checkbox" class="child1Gen">
            <label for="4.12">Add Customer</label>
          </div>
        </li>
      </ul>
    </li>
    <li class="has_sub">
      <div class="checkbox">
        <input id="5" type="checkbox" class="parent">
        <label for="5">Example</label>
      </div>
      <ul class="list-unstyled">
        <li>
          <div class="checkbox" style="margin-left: 25px;">
            <input id="5.1" type="checkbox" class="child1Gen">
            <label for="5.1">Example1</label>
          </div>
        </li>
        <li>
          <div class="checkbox" style="margin-left: 25px;">
            <input id="5.4" type="checkbox" class="child1Gen">
            <label for="5.4">Example2</label>
          </div>
        </li>
        <li class="has_sub">
          <div class="checkbox" style="margin-left: 25px;">
            <input id="5.5" type="checkbox" class="child1Gen">
            <label for="5.5">Example3</label>
          </div>
          <ul class="list-unstyled">
            <li>
              <div class="checkbox" style="margin-left: 50px;">
                <input id="5.5.1" type="checkbox" class="child2Gen">
                <label for="5.5.1">Example3Sub1</label>
              </div>
            </li>
            <li>
              <div class="checkbox" style="margin-left: 50px;">
                <input id="5.5.2" type="checkbox" class="child2Gen">
                <label for="5.5.2">Example3Sub2</label>
              </div>
            </li>
            <li>
              <div class="checkbox" style="margin-left: 50px;">
                <input id="5.5.3" type="checkbox" class="child2Gen">
                <label for="5.5.3">Example3Sub3</label>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

For Intermediate checkbox

https://stackoverflow.com/a/56600257/8053274