jQuery checkbox check uncheck child checkbox
<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>
