使用JavaScript实现单击复选框实现全选与全不选功能并通过ajax实现批量删除功能

绝地灬酷狼 2023-10-17 13:17 20阅读 0赞

前台页面通过sJavaScript实现单击复选框实现全选与全不选功能代码：

实现批量删除功能前台页面代码：

$(function(){
    				$("#moreDel").click(function(){
    					//创建存放复选框的数组
    					var list = [];
    					//获取复选框的值并存入数组 
    					$("input[name='oneCheck']:checked").each(function(){
    		                    list.push($(this).val());
    		                }); 
    					//判断是否有勾选复选框
    					if(list.length!=0){
    					$.ajax({
    						type:"post",//提交方式
    						url:"salary/deleteSalary",//控制层的路径
    						data:"oneCheck="+list,
    						success:function(){
    							//当删除成功后刷新页面
    							setTimeout("location.reload()",100);
    						}
    						});
    					}else{
    						alert("请勾选您所需要删除的信息！");
    					};
    				});
    			})

后台控制层代码：

Map<String, Object> map = new HashMap<String, Object>();
    		// 获取复选框的状态
    		String checkbox = request.getParameter("oneCheck");
    		// 判断是否有选中复选框
    		if (checkbox != null) {
    			// 创建集合存放复选框对应的值
    			List<Integer> list = new ArrayList<Integer>();
    			// 将从页面获取到的值用“，”分开
    			String[] str = checkbox.split(",");
    			//遍历值并转换为int类型存入集合
    			for (String string : str) {
    				int salaryId = Integer.parseInt(string);
    				list.add(salaryId);
    			}
    			//将保存值的集合存入map
    			map.put("salaryIds", list);
    			//调用方法批量删除
    			sb.deleteSalary(map);
    		}

mybatis映射文件的代码：

<foreach collection="salaryIds" item="salaryId" separator="," open="(" close=")">
    				delete from salary where salaryId in #{salaryId}
    			</foreach>