Jquery實(shí)現(xiàn)checkbox全選、取消全選和反選

高璐發(fā)布于2019-08-02 10:04 / 3441人閱讀

摘要：最近在看廖雪峰的教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來了，現(xiàn)在分享出來，提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項(xiàng)的，然后通過邏輯代碼實(shí)現(xiàn)題目要求。

最近在看廖雪峰的Jquery教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來了，現(xiàn)在分享出來，提供給小白學(xué)習(xí)。題目如下：

首先要獲取到全選checkbox和每一項(xiàng)的checkbox，然后通過邏輯代碼實(shí)現(xiàn)題目要求。
先提供常規(guī)思路的版本，代碼注釋已經(jīng)詳細(xì)了：

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

deselectAllLabel.click(() => {//當(dāng)用戶去掉“全不選”時(shí)，自動(dòng)不選中所有語言；
    langs.prop("checked", false);
    deselectAllLabel.hide();
    selectAllLabel.show();
});

langs.map(() => {
    $(this).change(() => {
        // 首先獲取已選中checkbox的個(gè)數(shù)
        var len = form.find("[name=lang]:checked").length;
        console.log("len=", len);
        // 當(dāng)用戶把所有語言都手動(dòng)勾上時(shí)，“全選”被自動(dòng)勾上，并變?yōu)椤叭贿x”；
        if (len === langs.length) {
            selectAllLabel.hide();
            deselectAllLabel.show();
            selectAll.prop("checked", true);
        } else { // 當(dāng)用戶手動(dòng)去掉選中至少一種語言時(shí)，“全不選”自動(dòng)被去掉選中，并變?yōu)椤叭x”。
            selectAll.prop("checked", false);
            selectAllLabel.show();
            deselectAllLabel.hide();
        }
    });
});

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

上面的代碼可以實(shí)現(xiàn)題目的要求，但是代碼量有點(diǎn)大，強(qiáng)迫癥不精簡會死的。先看看效果吧：

下面是放大招時(shí)間，如果你已經(jīng)搞懂上面的方法，請向下升級：

function updateLabel() {
    // 當(dāng)已選中項(xiàng)和langs項(xiàng)數(shù)相等則allChecked為true，否則為false
    let allChecked = langs.filter(":checked").length === langs.length;
    // 根據(jù)選項(xiàng)是否全選中來設(shè)置“全選”選框的選中狀態(tài)
    selectAll.prop("checked", allChecked);
    if (allChecked) {
        selectAllLabel.hide();
        deselectAllLabel.show();
    } else {
        selectAllLabel.show();
        deselectAllLabel.hide();
    }
}
selectAll.change(e => {
    // 根據(jù)selectAll是否選中，設(shè)置每個(gè)langs的狀態(tài)
    langs.prop("checked", selectAll.is(":checked"));
    updateLabel();
});
invertSelect.click(e => {
    langs.click();
});
langs.change(() => updateLabel());

});

GPU云服務(wù)器云服務(wù)器全選和反選功能 jquery全選反選 jquery全選checkBox 全選反選

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52106.html

發(fā)表評論

登陸后可評論

0條評論

高璐

男|高級講師

我要關(guān)注我要私信

TA的文章

RackNerd：$19.99/年KVM-1.8GB/28GB/3TB/洛杉磯機(jī)房

閱讀 2858·2021-07-30 15:30
Web前端開發(fā)標(biāo)準(zhǔn)規(guī)范

閱讀 553·2019-08-30 15:55
讀redux源碼總結(jié)

閱讀 1621·2019-08-26 17:04
History對象

閱讀 633·2019-08-26 11:36
閾值報(bào)警功能

閱讀 2064·2019-08-26 10:58
如何開發(fā)一個(gè)基于 Vue 的 ui 組件庫（一）

閱讀 3549·2019-08-23 14:34
在Ubuntu Server中安裝apache

閱讀 1558·2019-08-22 18:48
記一次簡單的DOM XSS攻擊實(shí)驗(yàn)

閱讀 2522·2019-08-21 17:51

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Jquery實(shí)現(xiàn)checkbox全選、取消全選和反選

相關(guān)文章