php - How to make the checkbox working properly in following scenario? -

i'm using php, smarty , jquery website. in smarty template i'm having few checkboxes upon i'm working. reference following smarty code snippet regarding checkboxes.

<table cellpadding="5" cellspacing="0" border="0" id="groups_listing" style="{if $data.show_group=='on'}display:{else}display:none;{/if}">      <tr>      {if $all_groups}      {assign var='i' value=0}      {foreach from=$all_groups item="group"}        {if $i%4 == 0}</tr><tr>{/if}          <td valign="top" align="left" width="200">            <table cellpadding="5" cellspacing="0" border="0">              <tr>                <td>                <input type="checkbox" name="parent_groups[]" id="{$group.parent_id}" id="{$group.parent_id}" onchange="check_subgroups(this.id, 'class_{$group.parent_id}');" value="{$group.parent_id}" {foreach from=$user_groups item=user_grp} {if $user_grp== $group.parent_id} checked="checked" {/if}{/foreach}>                <label><strong>{$group.parent_name} </strong></label>                <input type="hidden" name="main_groups[]" id="main_groups[]" value="{$group.parent_id}">                </td>              </tr>                                     {foreach from=$group.subgroups item=subgroup}              <tr>                <td>                <input type="checkbox" name="groups_{$group.parent_id}[]" class="class_{$group.parent_id}" onchange="uncheck_main_group('{$group.parent_id}'); return false;" value="{$subgroup.group_id}" style="margin-left:20px;" {foreach from=$user_groups item=user_grp} {$user_grp} {if $user_grp==$subgroup.group_id} checked="checked" {/if}{/foreach}> <label>{$subgroup.group_name}</label>                </td>              </tr>              {/foreach}            </table>              {assign var='i' value=$i+1}          {/foreach}        {/if}     </td>   </tr>   </table> 

the javascript functions follows:

function show_groups(check_box_id)  {     if ($(check_box_id).is(':checked')) {          $('#groups_listing').show();          } else {          $('#groups_listing').hide();         } }  function check_subgroups(parent_id, class_name) {          var chk = document.getelementbyid(parent_id).checked;         if(chk == true)              $('.'+jquery.trim(class_name)).attr('checked', true);         else             $('.'+jquery.trim(class_name)).attr('checked', false);     } 

the first javascript function named show_groups() works fine, noissue that. issue second function named check_subgroups(). works fine after page load later if uncheck , again chech parent checkbox it's not working. when check child checkboxes 1 bu 1 expected parent child box should automatically checked , vice versa. not working in current situation. can me in achieving functionality. reference i'm attaching screen shot of checkboxes question. can see here in question i've checked child check boxes under parent course parent checkbox not getting checked automatically. in advance.

i hope don't mind created jsfiddle abstraction ensuring children being checked toggles parent checked, rather modifying code give idea of 1 approach might use.

<div class="parentdiv">     <input type="checkbox" class="parent"/>     <div class="childgroup">         <input type="checkbox" class="child"/>         <input type="checkbox" class="child"/>         <input type="checkbox" class="child"/>     </div> </div> 

then can use jquery ensure parent selects/deselects when child group changes.

$('.child').on('change', function () {      var $parent = $(this).closest('.parentdiv').find('input.parent'),     $childcheckboxes = $(this).closest('.childgroup').find('.child');      if ( $childcheckboxes.length === $childcheckboxes.filter(':checked').length ) {         $parent.prop('checked', true);     } else {         $parent.prop('checked', false);     }  }); 

and toggle children on parent toggle:

$('.parent').on('change', function () {      var $children = $(this).closest('.parentdiv').find('.child');      $children.prop('checked', $(this).is(':checked'));  }); 

per request, i've tried put context of check_subgroups function:

function check_subgroups(parent_id, class_name) {       $parent = $('#' + parent_id);      $childcheckboxes = $('.' + $.trim(class_name));      $childcheckboxes.prop('checked', $parent.is(':checked'));   } 

and toggle parent when children selected:

function uncheck_main_group(parent_id) {      var $parent = $('#' + parent_id);      var $children = $('.class_' + $.trim(parent_id));      if ( $children.length === $children.filter(':checked').length ) {         $parent.prop('checked', true);        } else {         $parent.prop('checked', false);        }  }