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的全选、反选、提交操作相关推荐

layui 实现表单、表格中复选框checkbox的全选功能
一.layui 实现表单中多选框的全选功能,代码如下: //html页面表单 <form class="layui-form"><div class=" ...
复选框实现。全选、全不选、多选
复选框实现全选.全不选.被选: html代码 <input type="checkbox" id="checksboxs">全选<input ...
vue设置多选框默认勾选_vue中复选框怎么默认全选，至少选择4个才可以点击下一步...
[1]项目中有这样的需求,要怎么解决呢...默认复选框是全选状态,也可以取消某一个状态,至少选择4个选项才可以点击下一步.这个要怎么实现啊 html: 原料进厂模块组装成品质检仓储物流销售 ...
HTML复选框--checkbox
在公司实际开发中,会经常遇到复选框全选.多选.统计选中个数的情况,所以总结研究了一些大神的帖子,汇总学习一下! 1.统计被选中复选框的个数 2.点击复选框,执行对应函数 3.获取复选框的状态 4.全选 ...
java中判断复选框是否选中_php 判断复选框checkbox是否被选中
php 判断复选框checkbox是否被选中复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考一下 ...
php 获取checkbox是否选中,javascript操作html复选框checkbox:如何判断复选框是否被选中...
(由www.169it.com搜集整理) 在PHP中,html复选框checkbox被选中,则提交的值是on,否则就是空,所以可以通过value值判断是否被选中.在JavaScript中,貌似不管您选 ...
饿了么UI elementUI中的el-table勾选框设置默认勾选、禁用
最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark="1",是勾选状态且该勾选框变为禁用状态:反 ...
elementUI中的el-table勾选框设置默认勾选、禁用
elementUI中的el-table勾选框设置默认勾选.禁用最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark= ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...

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

JQuery实现复选框CheckBox的全选、反选、提交操作相关推荐

最新文章

热门文章