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 Abstraction，以确保所有被检查的孩子切换父母进行检查，而不是完全修改你的代码，让你知道你可能会使用的一种方法。 / p>

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

checked属性的值是什么并不重要。如果存在，则会选中该复选框。

如何使复选框在以下方案中正常工作？

2 个答案: