jq实现全选功能

最新推荐文章于 2024-01-23 19:19:19 发布

dingxx92

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： jquery-全选

本文链接：https://blog.youkuaiyun.com/u010451286/article/details/47359933

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了使用jQuery实现全选功能的逻辑，包括选中全选框时全选、取消全选、单个选择框状态变化对全选框的影响。同时强调了在处理选中状态时，应当使用.prop("checked", bool)而不是.attr("checked", "checked")来确保事件正确响应。" 91046066,7992091,二维数组查找算法,"['算法', '数据结构', '数组', '查找']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全选功能事件解析

1.选中全选框 ->全选
2.取消全选框 ->取消全选
3.选中单个选择框 ->是否已经所有单个选择框都选中 ->全选框选中
4.取消单个选择框 ->全选框取消选中

全选事件的代码

//全选事件
$("#check-all").change(function() {
        if ($(this).is(':checked')) {
            $(".check-order").prop("checked", true);
        } else {
            $(".check-order").prop("checked", false);
        }
    });
    //单个选中或取消
    $(".check-order").change(function() {
        //判断是否选中
        if ($(this).is(':checked')) {
            var isall = true;
            $(".check-order").each(function(i, val) {
                if (!$(val).is(':checked')) {
                    isall = false;
                }
            });
            //判断是否已经全选
            if (isall) {
                $("#check-all").prop("checked", true);
            }
        } else {
            $("#check-all").prop("checked", false);
        }
    });