JQuery实现复选框CheckBox的全选、反选、提交操作

我就是我 2021-08-31 23:13 400阅读 0赞

对复选框最基本的应用，就是对复选框进行全选、反选和提交等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。

**【示例】**使用Jquery实现复选框CheckBox的全选、反选、提交操作。

（1）创建页面，创建一个表格在表格的第一列中放入一组复选框，并实现复选框的全选、反选、提交操作。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>复选框的应用</title>
        <meta name="author" content="pan_junbiao的博客">
        <style>
            table { border-collapse: collapse;}
            table,table tr th, table tr td { border:1px solid #000000; text-align: center; padding: 5px;}
            .u_button{padding: 5px; margin-top: 10px;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th><input type="checkbox" id="checkAll" /></th>
                <th>编号</th>
                <th>用户名称</th>
                <th>博客信息</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="checkItem" value="1"/></td>
                <td>1</td>
                <td>pan_junbiao的博客</td>
                <td>您好，欢迎访问 pan_junbiao的博客</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="checkItem" value="2"/></td>
                <td>2</td>
                <td>pan_junbiao的博客</td>
                <td>https://blog.csdn.net/pan_junbiao</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="checkItem" value="3"/></td>
                <td>3</td>
                <td>pan_junbiao的博客</td>
                <td>您好，欢迎访问 pan_junbiao的博客</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="checkItem" value="4"/></td>
                <td>4</td>
                <td>pan_junbiao的博客</td>
                <td>https://blog.csdn.net/pan_junbiao</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="checkItem" value="5"/></td>
                <td>5</td>
                <td>pan_junbiao的博客</td>
                <td>您好，欢迎访问 pan_junbiao的博客</td>
            </tr>
        </table>
        <input type="button" class="u_button" value="反选" id="btnCheckedRev"/>
        <input type="button" class="u_button" value="提交" id="btnSubmit"/>
    </body>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function()
        {
            //全选
            $("#checkAll").click(function(){
                $("[name=checkItem]:checkbox").prop("checked",this.checked);
            });
    
            //复选框组的联动效果
            $("[name=checkItem]:checkbox").click(function(){
                var flag = true;
                $("[name=checkItem]:checkbox").each(function(){
                    if(!this.checked)
                    {
                        flag = false;
                    }
                });
                $("#checkAll").prop("checked",flag);
            });
    
            //反选
            $("#btnCheckedRev").click(function(){
                $("[name=checkItem]:checkbox").each(function(){
                    this.checked = !this.checked;
                });
            });
    
            //提交
            $("#btnSubmit").click(function(){
                var idArray = new Array(); //用户ID数组
                $("[name=checkItem]:checkbox:checked").each(function(){
                    idArray.push($(this).val());
                });
    
                if(idArray.length==0)
                {
                    alert("请选择用户！");
                    return;
                }
    
                if (!confirm("确定提交记录吗？")) {
                    return;
                }
    
                //执行Ajax请求
                $.ajax({
                    type: "POST",
                    url: "/getUserIds",
                    data:{
                        userIds:idArray
                    },
                    success: function(result) {
                        if(result==true)
                        {
                            alert("提交成功");
                        }
                        else
                        {
                            alert("提交失败");
                        }
                    }
                });
            });
        });
    </script>
    </html>

> **注意：**从示例中可以看出，使用的是 prop() 方法来设置复选框的属性值，而不使用 attr() 方法，这是因为如果使用 attr() 方法会存在浏览器的兼容问题。

**前台执行结果：**

![20200729154536559.jpg][]

（2）创建后台控制器（Controller），实现接收提交的用户编号数组并打印出接收到的用户编号。

/**
     * 获取用户编号数组
     * @author pan_junbiao
     */
    @ResponseBody
    @RequestMapping(value = "getUserIds", method = RequestMethod.POST)
    public boolean getUserIds(@RequestParam(value="userIds[]") Integer[] userIds)
    {
        System.out.println("用户编号：");
        Arrays.stream(userIds).forEach(System.out::println);
        return true;
    }

> **注意：**后台使用的是 SpringMVC 框架，在控制器方法的参数声明中一定要添加 @RequestParam(value="userIds\[\]") 语句，否则无法获取提交的用户编号数组。

**后台执行结果：**

![20200729155642518.jpg][]

[20200729154536559.jpg]: /images/20210724/a211bf24d73b4c72ae3393229853d031.png
[20200729155642518.jpg]: /images/20210724/8f4978445f1c44d6b3a171282464fa65.png