如果所有子复选框都被取消选中，如何取消选中父复选框，反之亦然？

尝试change事件 演示

$('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>

对于中间复选框 https://stackoverflow.com/a/56600257/8053274