jquery 全选全不选反选

原创

mob64ca12da2d62 2024-04-16 04:45:59 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12da2d62的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery全选、全不选、反选功能实现

在网页开发中，常常会遇到需要操作多个复选框的情况，比如全选、全不选、反选等功能。使用jQuery可以很方便地实现这些功能，让用户可以快捷地选择需要的项目。

如何使用jQuery实现全选、全不选、反选功能

首先，我们需要在HTML文件中引入jQuery库，可以通过CDN方式引入：

<script src="

接着，在HTML中添加复选框元素，我们以一个简单的待选列表为例：

<input type="checkbox" class="checkAll">全选<br>
<input type="checkbox" class="checkItem">选项1<br>
<input type="checkbox" class="checkItem">选项2<br>
<input type="checkbox" class="checkItem">选项3

然后，我们可以使用jQuery编写相应的脚本来实现全选、全不选、反选功能。下面是示例代码：

$(function(){
    // 全选
    $(".checkAll").click(function(){
        $(".checkItem").prop("checked", $(this).prop("checked"));
    });
    
    // 全不选
    $(".checkItem").click(function(){
        if(!$(this).prop("checked")){
            $(".checkAll").prop("checked", false);
        }
    });
    
    // 反选
    $("#reverse").click(function(){
        $(".checkItem").each(function(){
            $(this).prop("checked", !$(this).prop("checked"));
        });
    });
});

在上面的代码中，我们首先给全选框和待选列表项分别添加了类名checkAll和checkItem，然后在jQuery脚本中使用这些类名来实现全选、全不选、反选功能。当全选框被点击时，所有待选列表项的选中状态会跟随全选框的状态变化；当待选列表项被点击时，如果有任意一个待选列表项未被选中，则全选框也会被取消选中状态；当点击“反选”按钮时，待选列表项的选中状态会被取反。

实现效果

通过上述代码，我们成功实现了全选、全不选、反选功能。用户可以通过点击全选框来选择所有待选列表项，也可以通过点击单个列表项来取消某一项的选择，还可以通过点击反选按钮来反选所有项。

甘特图：

gantt
    title jQuery全选、全不选、反选功能实现

    section 实现功能
    添加jQuery库       : done, a1, 2022-01-01, 1d
    编写HTML布局       : done, a2, after a1, 1d
    编写jQuery脚本    : done, a3, after a2, 2d