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

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

【示例】使用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() 方法会存在浏览器的兼容问题。

前台执行结果：

（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[]") 语句，否则无法获取提交的用户编号数组。

后台执行结果：

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

猜你喜欢