我的网站使用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（）的函数。页面加载后，它最初也可以正常工作，但后来如果我取消选中并再次选中父复选框，它就不起作用了。此外，当我逐个选中所有子复选框时，预计父-子复选框应自动被选中，反之亦然。在目前的情况下，这是行不通的。你能帮我实现这个功能吗。为了你的参考，我附上了这个问题的复选框的屏幕截图。您可以在问题中看到，我已经选中了parentCourse下的所有子复选框，但parent复选框不会自动选中。提前谢谢。
我希望你不介意，但我创建了一个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);
}
}
而不是
$('.'+jQuery.trim(class_name)).attr('checked', false);
使用
$('.'+jQuery.trim(class_name)).removeAttr('checked');
选中属性的值是多少并不重要。如果存在，则选中该复选框。