在以下情況下如何使復選框正常工作？

Question

我在網站上使用PHP，Smarty和jQuery。 在一個聰明的模板中，我只有幾個復選框可以使用。 供您參考，以下是我關於復選框的巧妙代碼段。

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

javascript函數如下：

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

第一個名為show_groups（）的 javascript函數可以正常工作，沒有問題。 我的問題是第二個名為check_subgroups（）的函數。 最初在頁面加載后，它也可以正常工作，但是稍后，如果我取消選中並再次選中父復選框，它將無法正常工作。 另外，當我選中所有子復選框時，可以預期父子復選框應自動選中，反之亦然。 在當前情況下這不起作用。 您能幫我實現此功能嗎？ 供您參考，我在此附上復選框的屏幕快照。 您可以在以下問題中看到我已經選中了“父課程”下的所有子復選框，但未自動選中父復選框。 提前致謝。

Answer 1

希望您不要介意，但我創建了一個jsFiddle抽象來確保所有被選中的子級都將父級切換為選中狀態，而不是完全修改您的代碼以使您了解可以使用的一種方法。

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

});

並在父級切換時切換所有子級 ：

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

選中的屬性的值是什么都沒有關系。 如果存在 ，則選中該復選框。