Jquery實現checkbox全選、取消全選和反選

最近在看廖雪峯的Jquery教程，事件篇的練習題比較綜合，研究了好久終於研究出來了，如今分享出來，提供給小白學習。題目以下：

首先要獲取到全選checkbox和每一項的checkbox，而後經過邏輯代碼實現題目要求。
先提供常規思路的版本，代碼註釋已經詳細了：

selectAllLabel.click(() => {
    selectAllLabel.hide();
    deselectAllLabel.show();
    langs.prop('checked', true);
});

deselectAllLabel.click(() => {//當用戶去掉「全不選」時，自動不選中全部語言；
    langs.prop('checked', false);
    deselectAllLabel.hide();
    selectAllLabel.show();
});

langs.map(() => {
    $(this).change(() => {
        // 首先獲取已選中checkbox的個數
        var len = form.find('[name=lang]:checked').length;
        console.log('len=', len);
        // 當用戶把全部語言都手動勾上時，「全選」被自動勾上，並變爲「全不選」；
        if (len === langs.length) {
            selectAllLabel.hide();
            deselectAllLabel.show();
            selectAll.prop('checked', true);
        } else { // 當用戶手動去掉選中至少一種語言時，「全不選」自動被去掉選中，並變爲「全選」。
            selectAll.prop('checked', false);
            selectAllLabel.show();
            deselectAllLabel.hide();
        }
    });
});

invertSelect.click(() => {
    langs.each(() => {
        $(this).prop('checked', !$(this).prop('checked'));
    });
});

上面的代碼能夠實現題目的要求，可是代碼量有點大，強迫症不精簡會死的。先看看效果吧：

下面是放大招時間，若是你已經搞懂上面的方法，請向下升級：

function updateLabel() {
    // 當已選中項和langs項數相等則allChecked爲true，不然爲false
    let allChecked = langs.filter(':checked').length === langs.length;
    // 根據選項是否全選中來設置「全選」選框的選中狀態
    selectAll.prop('checked', allChecked);
    if (allChecked) {
        selectAllLabel.hide();
        deselectAllLabel.show();
    } else {
        selectAllLabel.show();
        deselectAllLabel.hide();
    }
}
selectAll.change(e => {
    // 根據selectAll是否選中，設置每一個langs的狀態
    langs.prop('checked', selectAll.is(':checked'));
    updateLabel();
});
invertSelect.click(e => {
    langs.click();
});
langs.change(() => updateLabel());

});