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

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>