jQueryのリアライズのチェックボックスをすべて選択、すべて選択とキャンセル抗選挙

最近のjQueryのチュートリアル、イベント章の練習より統合され、長い時間のための研究が最終的に来ている、と、今白学習に利用できるを共有する時遼雪峰の外観。次のように内容は次のとおりです。

各項目の最初のチェックボックスを選択し、チェックボックス、及びその要求の主題によって実現ロジックコードのため。
一般的なアイデアのバージョンを提供するために、コードのコメントは、詳細されています。

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());

});