title: jQuery checkbox check uncheck child checkbox
body: <p>I have a parent child category checkbox, to which child has sub-child. Child category only needs to gets displayed when parent category is clicked and when parent category is unchecked all child category needs to get hidden.</p>
  
  <p>Every thing works fine but when, suppose the child and subchild are checked. now when super-parent is unchecked then it hides the checkbox keeping subchild selected that should get unchecked.</p>
  
  <p>here is my code.</p>
  
  <pre><code>$(function () {
  $(':checkbox').change(function () {
  $("input[type='checkbox']:checked").each(function () {
      var inner_id = $(this).attr('id');
      if (inner_id.search("parent") &gt; -1) {
      //   $("input."+inner_id).attr('hidden','false')
      $("."+inner_id).removeAttr("hidden");
      }
  });
  });
  });
  
  $(function () {
      $(':checkbox').click(function () {
      var is_chk = $(this).attr('checked');
      var its_id = $(this).attr('id');
      if (is_chk != 'checked') {
          $("."+its_id).attr('hidden', 'true');
      }
  });
  });
  </code></pre>
  
  <p>the html code for this is.</p>
  
  <pre><code> &lt;input type="checkbox" id="parent1" /&gt;parent&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&lt;input type="checkbox" class="parent1" disabled="true" /&gt;child1&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&lt;input type="checkbox" class="parent1" disabled="true"/&gt;child2&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&lt;input type="checkbox" class="parent1" disabled="true"/&gt;child3&lt;br/&gt;
   &lt;input type="checkbox" id="parent2" /&gt;parent&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&lt;input type="checkbox"  class="parent2" disabled="true"/&gt;child1&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&lt;input type="checkbox" class="parent2" 
   id="parent3" disabled="true"/&gt;child2-parent&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="checkbox"
   class="parent3" disabled="true"/&gt;child1&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="checkbox"
   class="parent3"  disabled="true"/&gt;child2&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="checkbox"
   class="parent3"  disabled="true"/&gt;child3&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="checkbox"
   class="parent3"  disabled="true"/&gt;child4&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="checkbox" 
   class="parent3" id="parent4"  disabled="true"/&gt;child5-parent&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="checkbox" 
   class="parent4"  disabled="true"/&gt;child1&lt;br/&gt;
   &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="checkbox" 
   class="parent4"  disabled="true"/&gt;child2&lt;br/&gt;
  </code></pre>
  
  <p>or you can try it out here.</p>
  
  <p><a href="http://jsfiddle.net/DNDnT/4/" rel="nofollow">http://jsfiddle.net/DNDnT/4/</a></p>
  
  <p>just check-all check-box and click parent you will understand my problem.
  Thanks.</p>
  
  <p>The Actual code that i have tried in my project is.</p>
  
  <pre><code>$(function() {
  $(':checkbox').change(function() {
  
  $("input[type='checkbox']:checked").each(function() { 
    //var inner_id = $(this).attr('id');
      var inner_id = $(this).attr('value');
    var parId1="input."+inner_id;
    var parId2="."+inner_id;
  
  $(parId1).removeAttr("disabled");
    $(parId2).removeAttr("hidden");
  
  });
  });
  }); 
  
  $(function() {
  $(':checkbox').click(function() {
  var is_chk = $(this).attr('checked');
     var its_id = $(this).attr('value'); 
     //var parId2="#"+its_id;
      var parId1="input."+its_id;
      var parId2="."+its_id;
  
  
      if(is_chk!='checked') {
          $(parId1).removeAttr("checked");
          $(parId1).attr('disabled','true');
          $(parId2).attr('hidden','true');
  
      }
  });
  });
  </code></pre>