check all boxes checked when click on parent checkbox

I have Parent1 and check box when i click on Parent1 check box all the child belongs to parent1 should to checked and parent1 along with the checkbox should fadeout and again if i uncheck on any one of child the parent1 along with the checkbox should reappear and the parent and child values are coming from database and they are in for each loop i.e first parent for each loop inside that child for each loop.

My code is in http://jsfiddle.net/mrc4N/3/

<div class="middle-right">
  <ul class="mid-right-list">
    <li>
      <span id="Parent1a">+ Parent1<input name="parent" class="pc-box" type="checkbox"></span>
      <ul class="pa rplist">
          <li value="1" class="parent1">- Child 1.1 <input class="cc-box" name="child" type="checkbox"></li>
          <li value="2" class="parent1">- Child 1.2 <input class="cc-box" name="child" type="checkbox"></li>
          <li value="3" class="parent1">- Child 1.3 <input class="cc-box" name="child" type="checkbox"></li>
      </ul>
    </li>
    <li>
      <span id="Parent2a">+ Parent2<input name="parent" class="pc-box" type="checkbox"></span>
      <ul class="pb rplist">
      <li value="1" class="parent2 c1">- Child 2.1 <input class="cc-box" name="child" type="checkbox"></li>
      <li value="2" class="parent2 c2">-Child 2.2 <input class="cc-box" name="child" type="checkbox"></li>
      <li value="3" class="parent2 c3">- Child 2.3 <input class="cc-box" name="child" type="checkbox"></li>
    </ul>
    </li>
    <li><span id="Parent3a">+ Parent3<input name="parent" class="pc-box" type="checkbox"></span>
    <ul class="pc rplist">
    <li value="1" class="parent3 c1">-Child 3.1 <input class="cc-box" name="child" type="checkbox"></li>
    <li value="2" class="parent3 c2">- Child 3.2 <input class="cc-box" name="child" type="checkbox"></li>
    <li value="3" class="parent3 c3">- Child 3.3 <input class="cc-box" name="child" type="checkbox"></li>
    </ul>
    </li>
  </ul>
</div>

Thanks in advance


solution

You could use something like this:

$('[type="checkbox"][name="parent"]').click(function(){
  $(this).parent().next('ul').find('li input').prop('checked',this.checked);
});

EXAMPLE HERE