Как правильно настроить флажок в следующем сценарии?

Question

Я использую PHP, Smarty и jQuery для своего сайта. В шаблоне smarty у меня есть несколько флажков, над которыми я работаю. Для вашей справки ниже приведен фрагмент кода смарт-кода относительно флажков.

<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 яваскрипт функция заключается в следующем:

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); 
    } 

Первый Javascript функция с именем show_groups() работает отлично, noissue с ​​этим. Моя проблема связана со второй функцией: check_subgroups(). Он также отлично работает вначале после загрузки страницы, но позже, если я сниму и снова проведу родительский флажок, он не работает. Также, когда я проверяю все дочерние флажки на один буг, тогда ожидается, что родительский дочерний ящик должен автоматически получить флажок и наоборот. Это не работает в текущей ситуации. Можете ли вы помочь мне в достижении этой функциональности. Для вашей справки я прикрепляю снимок экрана с этим вопросом. Вы можете увидеть здесь, в вопросе, который я проверил все дочерние флажки под родителем Курс, но флажок parent не получает проверку автоматически. Заранее спасибо.

Answer 1

Надеюсь, вы не против, но я создал jsFiddle Abstraction для обеспечения того, чтобы все проверяемые дети переключали родительский флажок, а не изменяли ваш код, чтобы дать вам представление об одном подходе, который вы можете использовать.

<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> 

Затем вы можете использовать эту JQuery, чтобы обеспечить ваши родительские выбирает/отменяет при изменении ребенка группы.

$('.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); 
    } 

}); 

и toggle all children on parent toggle:

$('.parent').on('change', function() { 

    var $children = $(this).closest('.parentDiv').find('.child'); 

    $children.prop('checked', $(this).is(':checked')); 

}); 

на ваш запрос, я попытался поставить это в контексте вашей функции check_subgroups:

function check_subgroups(parent_id, class_name) { 

    $parent = $('#' + parent_id); 

    $childCheckboxes = $('.' + $.trim(class_name)); 

    $childCheckboxes.prop('checked', $parent.is(':checked')); 

} 

И для переключения родителя когда все дети выбраны:

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); 
    } 

} 

Answer 2

Вместо

$('.'+jQuery.trim(class_name)).attr('checked', false); 

использования

$('.'+jQuery.trim(class_name)).removeAttr('checked'); 

Это не имеет значения, что это значение проверяемого атрибута. Если это существует, этот флажок установлен.