jquery - 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);
        }

    }
    });