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

高璐發布于2019-08-02 10:04 / 3447人閱讀

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

最近在看廖雪峰的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());

});

云服務器 GPU云服務器全選和反選功能 jquery全選反選 jquery全選checkBox 全選反選

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52106.html

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

摘要：最近在看廖雪峰的教程，事件篇的練習題比較綜合，研究了很久終于研究出來了，現在分享出來，提供給小白學習。題目如下首先要獲取到全選和每一項的，然后通過邏輯代碼實現題目要求。最近在看廖雪峰的Jquery教程，事件篇的練習題比較綜合，研究了很久終于研究出來了，現在分享出來，提供給小白學習。題目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

wenzi 2019-08-22 15:56 評論0 收藏0
jQuery實現全選、反選和不選功能

摘要：當勾選全選按鈕旁邊的復選框時，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態。全選或全不選全選全不選反選設置全選復選框獲取選中選項的值選項總個數全選不全選HTML 我們的頁面上有一個歌曲列表，列出多行歌曲名稱，并匹配復選框供用戶選擇，并且在列表下方有一排操作按鈕。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.時間都去哪兒了 ...

番茄西紅柿 2019-04-23 11:43 評論0 收藏0
jQuery 全選和反選demo

摘要：前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會贏我只在乎你日不落選中的個數前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下： ...

diabloneo 2019-08-30 13:56 評論0 收藏0
jQuery 全選和反選demo

摘要：前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會贏我只在乎你日不落選中的個數前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下： ...

red_bricks 2019-08-26 11:39 評論0 收藏0
jQuery 全選和反選demo

摘要：前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會贏我只在乎你日不落選中的個數前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下： ...

sevi_stuo 2019-08-01 18:33 評論0 收藏0