Jquery实现checkbox全选、取消全选和反选

wenzi 发布于2019-08-22 15:56 / 1457人阅读

摘要：最近在看廖雪峰的教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下首先要获取到全选和每一项的，然后通过逻辑代码实现题目要求。

最近在看廖雪峰的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 全选反选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93877.html

Jquery实现checkbox全选、取消全选和反选

摘要：最近在看廖雪峰的教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下首先要获取到全选和每一项的，然后通过逻辑代码实现题目要求。最近在看廖雪峰的Jquery教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

高璐 2019-08-02 10:04 评论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