Nested table checkbox check/Uncheck

I have a page with nested table and checkbox for checking all the table cell . And checkbox for each table cell for checking respective cell.

What I'm trying to do is

1. CheckAll checkbox checks/uncheck all the parent and child checkbox
2. Uncheck a parent checkbox unchecks CheckALL checkbox and unchecks all the child checkbox
3. Check a parent checkbox checks all child checkbox and finds out if all other parent checkbox are checked or not, to check CheckALL checkbox
4. checking a child checkbox should check the respective parent
5. unchecking a child checkbox should check if siblings are checked, if not checked parent checbox should get unchecked and if checkALL checkbox is checked it should get unchecked too.

I'm unable to do this.

Here is what I have tried.

html:

<table class="table table-striped tablesorter">
  <thead>
    <tr colspan="2">
      <th>
        <input type="checkbox" id="checkedAll">
      </th>
      <th>Check/UnCheck ALL Boxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="checkParent">
      </td>
      <td>1KWT</td>

    </tr>
    <tr>
      <td colspan="2" style="padding: 0">
        <table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0">
          <thead>
            <tr>
              <th></th>
              <th>Sub</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
              <td>1KWT1</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
              <td>1KWT2</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="checkParent" style="margin-top: -3px"> </td>
      <td>1OMN</td>
    </tr>
    <tr>
      <td colspan="2" style="padding: 0">
        <table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0">
          <thead>
            <tr>
            <th></th>
              <th>Sub</th>
             </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
              <td>1OMN1</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
              <td>1OMN2</td>
             </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

script:

$(document).ready(function() {

  $("#checkedAll").change(function(){
    if(this.checked){
      $(".checkParent, .checkChild").each(function(){
        this.checked=true;
      });              
    }else{
      $(".checkParent, .checkChild").each(function(){
        this.checked=false;
      });              
    }
  });

  $(".checkParent").click(function () {
    if ($(this).is(":checked")){
      var isAllChecked = 0;
      $(".checkParent").each(function(){
        if(!this.checked)
           isAllChecked = 1;
      }) 
      $(".checkChild").prop("checked", true);
      if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }     
    }else {
      $("#checkedAll, .checkChild").prop("checked", false);

    }
  });

  $(".checkChild").click(function () {
    if ($(this).is(":checked")){
    $(".checkParent").prop("checked", true);

    }else {
      $(".checkParent").prop("checked", false);

    }
  });


});

link to fiddle http://ift.tt/2ftPUHY