jQuery:在复选框和子复选框之间建立关系

Question

这是一个标准场景，我有一个全勾复选框，它将根据自己的状态选中或取消选中一组复选框。

$('.checkall').on('click', function () {
    $(this)
        .closest('#grid')
        .find('#tblId')
        .find(':checkbox')
        .prop('checked', this.checked);
});

如果单独修改子复选框，我会像这样操作复选框的状态：

$('.child-checkbox').change(function () {
    if ($('.child-checkbox:checked').length == $('.child-checkbox').length) {
        $('.checkall').prop('checked', true);
    }
    else {
        $('.checkall').prop('checked', false);
    }
});

我很高兴这按预期工作，但我想知道我是否可以组合这两个代码段，以便在一个代码段中管理所有复选框和子复选框之间的关系。

Answer 1

我不认为它可以很好地组合成一个片段，但从我所看到的情况来看，它可以简化为

var $all = $('.checkall').on('click', function () {
    $childs.prop('checked', this.checked);
});
var $children = $('.child-checkbox').change(function () {
    $all.prop('checked', $children.not(':checked').length != 0);
});

如果您仍在寻找单个处理程序，请尝试

$('.checkall, .child-checkbox').change(function () {
    if ($(this).is('.checkall')) {
        $('.child-checkbox').prop('checked', this.checked);
    } else {
        $('.checkall').prop('checked', $children.not(':checked').length != 0);
    }
})

Answer 2

像这样的东西 看看是否有帮助

   $('.checkall,.child-checkbox')on('click', function () {
    if(this==".checkall"){
        $(this)
            .closest('#grid')
            .find('#tblId')
            .find(':checkbox')
            .prop('checked', this.checked);
    }else{
      if ($('.child-checkbox:checked').length == $('.child-checkbox').length) {
            $('.checkall').prop('checked', true);
        }
        else {
            $('.checkall').prop('checked', false);
        }
    }
    });