对复选框最基本的应用，就是对复选框进行全选、反选和提交等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。
【示例】使用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>/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>/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[]") 语句，否则无法获取提交的用户编号数组。
后台执行结果：
