1

ウェブサイトに 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()という名前の 2 番目の関数にあります。また、ページの読み込み後は最初は正常に機能しますが、後で親チェックボックスのチェックを外して再度チェックすると、機能しません。また、すべての子チェックボックスを1つずつチェックすると、親と子のボックスが自動的にチェックされ、その逆も同様であることが期待されます。これは現在の状況では機能していません。この機能を実現するのを手伝ってもらえますか。ご参考までに、この質問にチェックボックスのスクリーンショットを添付します。親コースの下のすべての子チェックボックスをチェックしましたが、親チェックボックスは自動的にチェックされません。前もって感謝します。

4

2 に答える 2

1

気にしないことを願っていますが、コードを正確に変更して使用できる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);
    }

});

そして、親の 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);   
    }

}
于 2013-09-04T13:07:07.960 に答える
0

それ以外の

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

使用する

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

checked 属性の値が何であるかは問題ではありません。存在する場合、チェックボックスがチェックされます。

于 2013-09-04T12:02:41.437 に答える