Php 如何使复选框在以下场景中正常工作？

我在我的网站上使用PHP、Smarty和jQuery。在smarty模板中，我使用的复选框很少。以下是关于复选框的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>

第一个名为show_groups（）的javascript函数运行良好，可以使用它。我的问题是第二个函数名为check_subgroups（）。在页面加载后，它最初也可以正常工作，但如果我取消选中并再次选中父复选框，它将不工作。此外，当我将所有子复选框一一选中时，预计父-子复选框将自动选中，反之亦然。在目前的情况下，这是行不通的。你能帮我实现这个功能吗。为了供您参考，我附上了这个问题的复选框的屏幕截图。您可以在问题中看到，我已选中了“家长课程”下的所有子复选框，但“家长”复选框不会自动选中。提前谢谢。

代替

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

使用

checked属性的值是多少并不重要。如果它存在，则选中该复选框。

而不是

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

使用

---

checked属性的值是多少并不重要。如果它存在，复选框将被选中。

我希望您不介意，但我创建了一个用于确保所有被选中的子项都将父项切换为选中，而不是精确地修改代码，让您了解可能使用的一种方法

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

以及：

根据您的请求，我已尝试将其置于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);   
    }

}

---

我希望您不介意，但我创建了一个用于确保所有被检查的子项都将父项切换为已检查的，而不是完全修改代码以让您了解可能使用的方法

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

以及：

根据您的请求，我已尝试将其置于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);   
    }

}

---

而不是在操作选中状态时使用attr。链接解释了更多。当然，这可能不是你问题的根源。而不是在操作选中状态时使用attr。链接解释了更多。当然，这可能不是你问题的根源。：谢谢你的回答，但我想你还没有弄清楚我的问题。手动逐个选中所有子框后，我想自动选中父复选框，反之亦然。你能帮我实现这一点吗？这是选中/取消选中主复选框的代码，当下面所有复选框都处于相同状态时。if（$（'.+jQuery.trim（class_name））.not（':checked'）.size（）=0{$（“#”+parent_id）.attr（'checked'，'checked'）；}否则if（$（'.+jQuery.trim（class_name）+'：checked'）.size（）=0{$（“#”+parent_id）。removeAttr（'checked'）}感谢您的帮助，但它工作不正常。它正在锁定“家长”复选框，因此我无法选中“家长”复选框。注意：谢谢您的回答，但我想您还没有清楚了解我的问题。手动逐个选中所有子框后，我想自动选中父复选框，反之亦然。你能帮我实现这一点吗？这是选中/取消选中主复选框的代码，当下面所有复选框都处于相同状态时。if（$（'.+jQuery.trim（class_name））.not（':checked'）.size（）=0{$（“#”+parent_id）.attr（'checked'，'checked'）；}否则if（$（'.+jQuery.trim（class_name）+'：checked'）.size（）=0{$（“#”+parent_id）。removeAttr（'checked'）}感谢您的帮助，但它工作不正常。它正在锁定“家长”复选框，因此我无法选中“家长”复选框。谢谢您的回答。很好用。但是，当我选中父复选框时，它对应的所有子复选框都没有被选中。只有这个问题，否则它的工作良好。为了实现这一点，您能否临时改进您的解决方案。这是答案中的最底层javascript，也是我链接到的第二个javascript。我要求您将代码转换为javascript，这样我就可以将其写入函数check_子组（parent_id，class_name）。你能转换它吗？明白了，我已经试着在最后用一个块更新我的答案，但是正如答案中提到的-如果这不起作用，请用你的代码重新创建一个JSFIDLE，这样我就可以更容易地解决任何问题了。：非常感谢Ross。我没有话要对你说谢谢。您的javascript代码工作正常，但反之亦然，即手动逐个选中子复选框后，父复选框不会自动选中。所以你能相应地修改你的功能代码吗？谢谢你的回答。很好用。但是，当我选中父复选框时，它对应的所有子复选框都没有被选中。只有这个问题，否则它的工作良好。为了实现这一点，您能否临时改进您的解决方案。这是答案中的最底层javascript，也是我链接到的第二个javascript。我要求您将代码转换为javascript，这样我就可以将其写入函数check_子组（parent_id，class_name）。你能转换它吗？明白了，我已经试着在最后用一个块更新我的答案，但是正如答案中提到的-如果这不起作用，请用你的代码重新创建一个JSFIDLE，这样我就可以更容易地解决任何问题了。：非常感谢Ross。我没有话要对你说谢谢。您的javascript代码工作正常，但反之亦然，即手动逐个选中子复选框后，父复选框不会自动选中。所以你能相应地修改你的功能代码吗？