JQuery realizes the check box CheckBox selection, reverse selection, submit operation

The most basic application of checkboxes is to select all checkboxes, reverse checkboxes, and submit operations. Complex operations need to be linked to options to achieve various cascading effects.

[Example] Use Jquery to implement the select all, reverse select, and submit operations of the CheckBox.

(1) Create a page, create a table, put a group of check boxes in the first column of the table, and realize the check box selection, reverse selection, and submit operations.

<!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>

Note: As can be seen from the example, the prop() method is used to set the attribute value of the check box instead of the attr() method. This is because there will be browser compatibility issues if the attr() method is used.

Results of the foreground execution:

(2) Create a background controller (Controller) to receive the submitted user ID array and print out the received user ID.

/**
 * 获取用户编号数组
 * @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;
}

Note: The SpringMVC framework is used in the background, and @RequestParam(value="userIds[]") must be added to the parameter declaration of the controller method, otherwise the submitted user ID array cannot be obtained.

Background execution results:

JQuery realizes the check box CheckBox selection, reverse selection, submit operation

Guess you like