我觉得这样能够理清相互时间之间的触发关系。 例如，selectAll.click()一定会触发selectAll.change()事件，而同样的langs.change()也会触发selectAll.change()事件， 反选事件也会触发langs.change()事件

selectAll.click(function () {
    if ($(this).is(':checked')) {
        // after click, selectAll is checked
        langs.prop('checked', true);
    } else {
        // after click, selectAll is not checked
        langs.prop('checked', false);
    }
});

selectAll.change(function () {
    if ($(this).is(':checked')) {
        // after click, selectAll is checked
        selectAllLabel.hide();
        deselectAllLabel.show();
    } else {
        // after click, selectAll is not checked
        selectAllLabel.show();
        deselectAllLabel.hide();
    }
});

invertSelect.click(function () {
    langs.map(function () {
        $(this).prop('checked', !$(this).is(':checked'));
    });
    langs.change();
});

langs.change(function () {
    let allChecked = langs.filter(':checked').length === langs.length;
    if (allChecked) {
        selectAll.prop('checked', true);
    } else  {
        selectAll.prop('checked', false);
    }

    selectAll.change();     // update the status of selectall checkbox
});