Javascript 使用jquery选择和取消选择复选框

请参阅以下代码：

$（文档）.ready（函数（）{
$（'.checkbox group.parents checkbox.panel title input'）。单击（函数（）{
$（this）.closest（'.checkbox group'）.find（'input[type=“checkbox”]”）。not（this）.prop（'checked'，this.checked）。closest（'label'）；
});
});

项目
项目管理

添加项目

编辑项目

您需要侦听子复选框，并根据它们是否没有未选中的复选框来设置父复选框

JSFiddle：

选择器都可以简化，但这将回答您的基本问题

您可以将其缩短为：

$('.checkbox-group .parents-checkbox .panel-title :checkbox').prop('checked', !$('.child-checkbox :checkbox:not(:checked)').length);


您可以将其缩短得更多，例如，如果您可以使用ID选择器，但您的代码表明页面上可能有多组复选框

如果有多个组，您还需要在新代码中再次使用
最近的
：

e、 g

注:


您应该优先使用
更改
事件，而不是
单击
复选框
您可以对复选框使用
：复选框
伪选择器：

更新选中的“任意”子项：

如果要在选中任何子框时勾选父项，请反转逻辑：


或者，要支持多个复选框组：


最简单的方法是检查长度

$(".checkbox1").change(function(){
    if ($('.checkbox1:checked').length == $('.checkbox1').length) {
       //check the parent checkbox
    }
};

提示：您应该在元素上使用数据属性，以减少代码量和JavaScript的复杂性


$（文档）.ready（函数（）{
$（'.checkbox group.parents checkbox.panel title input'）。单击（函数（）{
$（this）.closest（'.checkbox group'）.find（'input[type=“checkbox”]”）。not（this）.prop（'checked'，this.checked）。closest（'label'）；
});
$（'.checkbox group.child checkbox input'）。单击（函数（）{
var total=$（'.checkbox group.child checkbox input'）.length；
var checked=$（'.checkbox组.子复选框输入：checked'）。长度；
$（'.checkbox group.parents checkbox.panel title input'）.prop（'checked'，（total==checked））；
});
});

项目
项目管理


添加项


编辑项目


回答得很好。为了澄清并确保即使在页面中添加了其他类型的控件，这种格式也能正常工作，您是否应该在选择器中添加“[input type='checkbox']”？@Stan：我会自己修改大多数选择器，以便所有内容都能正确地确定范围和分组。我正在更新答案以显示其他选项。目标元素具有ID属性！我会用它。@Rockstar:去过那里，做到了。。。请检查是否有修改以回答：）@rockstar：上一个示例对于倍数是正确的，但我链接了错误的JSFIDLE。链接现在已修复。错误。。。减少代码还意味着将
（total===checked）
放在单个prop语句中，而不是重复行：）
$('.child-checkbox :checkbox').change(function(){
    var $group = $(this).closest('.checkbox-group');
    $group.find('.parents-checkbox .panel-title :checkbox').prop('checked', !$group.find('.child-checkbox :checkbox:not(:checked)').length);
});

$('.child-checkbox input').change(function(){
    $('.checkbox-group .parents-checkbox .panel-title input').prop('checked', $('.child-checkbox input:checked').length);
});

$('.child-checkbox :checkbox').change(function(){
    var $group = $(this).closest('.checkbox-group');
    $group.find('.parents-checkbox .panel-title :checkbox').prop('checked', $group.find('.child-checkbox :checkbox:checked').length);
});

$(".checkbox1").change(function(){
    if ($('.checkbox1:checked').length == $('.checkbox1').length) {
       //check the parent checkbox
    }
};