vue&jquery的全选反选，完成批量删除

之前我用的vue批量删除，点击全选按钮不能获取到id，只能点击多个才可以获取到id，现在此方法可以点击全选获取所有id，并可以实现反选.

vue中定义好两个数组arrin，brr就ok了。

//brr是存储批量删除的id数组
//arrin.nid是查询出id
<input type="checkbox" name="id" v-model="brr" :value="arr.nid">
<input type="checkbox" v-on:click="quanxuan()"   id="all" />全选 

前端 vue函数代码：

//全选
quanxuan:function(){
     
				//遍历数据列表   forEach可以用for循环代替
				//arrin是遍历你的数据
	            this.arrin.forEach(function(item, index) {
     
	            	//判断某元素是否存在数组中
	            	if(vm.brr.indexOf(item.nid)==-1){
     
	            		vm.brr.push(item.nid);
	            	}else{
     //存在就删除
	            		var ukey=vm.brr.indexOf(item.nid);
	            		//1是删除的长度
	            		vm.brr.splice(ukey,1);
	            	}
	            });
			},
查询id的数组(arrin.nid)遍历,判断储存批量删除(brr)数组中是否有，存入brr数组，调用删除方法进行删除。


	//多选删除
			delAll:function(brr){
     
				if(brr.length==0){
     
					alert("至少选择一条删除");
					return false;
				}
				//把数组转成String
				var s=vm.brr.join(",");
				alert(s);
				if(confirm("确认删除?")) {
     
					$.post("/news/delAll",{
     nid:s},function(data){
     
						alert(1);
						if(data=="1"){
     
							alert("删除成功");
						//删除成功跳转
						window.location.href="/ht/news";
						}else{
     
							alert("删除失败");
						}
					})
		        }
			},

后端 控制器 代码(批量删除) ：

//多选删除
	@RequestMapping("delAll")
	@ResponseBody
	public String delAll(HttpServletRequest req) {
     
		String str=req.getParameter("nid");
		//先判断有没有值
		if(str==null || "".equals(str)) {
     
			return "拜拜";
		}
		String[] strs=str.split(",");
		for (int i = 0; i < strs.length; i++) {
     
			int x=Integer.parseInt(strs[i].toString());
			//调用删除方法
			newsService.del(x);
			System.out.println(x);
		}
		return "1"; 
	}