Check and Uncheck Parent/Child Checkboxes using Jquery

I have to use group of checkboxes in my project.

This is how my HTML look like:

<table id="myTable">
<tr>
  <td>
    <label>
      <input type="checkbox" class="parent" name="mod[6]" value="1">
    </label>
  </td>
  <td><span>Parent Module</span></td>
  <td>
    <label>
      <input type="checkbox" name="mod[7]" value="1"> Sub Module
    </label>
    <label>
      <input type="checkbox" name="mod[8]" value="1"> Sub Module
    </label>
    <label>
      <input type="checkbox" name="mod[9]" value="1"> Sub Module
    </label>
  </td>
</tr>
<tr>.....</tr>
<tr>.....</tr>
</table>

Using this checkboxes, users can select their preferred parent and sub module selection.
When making that selection, it should work as follows.

  • When a parent is checked, all children are checked under it. (Parents
    and children are separated by a row on the table)
  • When a parent is unchecked, all children are unchecked under it.
  • At the very least, When one child is checked, its parent should be checked.
  • When no child is checked, its parents should not be checked.

I have done this work to some extent. But I look forward to your help in completing this.

This is how I tried it using Jquery.

$('#myTable').on( "change", "label > input[type=checkbox]", function(e) {
  var checkboxes = $(this).closest('tr').find("input[type=checkbox]");
  if ($(this).hasClass("parent")) { 
    if ($(this).prop("checked")) {
      checkboxes.prop("checked", true);
    }
  }
});