vue+jQuery实现全选，全不选，反选以及批量删除

vue+jQuery实现全选，全不选，反选以及批量删除

做项目的时候经常会遇到全选，全不选，反选以及批量删除这些基本效果
那它们的原理是什么呢？？
全选，全不选，反选：原理就是获取他状态（checked=true/false）然后通过方法把所有的复选框的状态改变成按钮的状态，反选就是把复选框的状态改变成改变成按钮的相反状态

$(function(){
	$("#butt").click(function(){
		$("input[name='nid']:checkbox").prop("checked",true);
	});
	$("#buttNo").click(function(){
		$("input[name='nid']:checkbox").prop("checked",false);
	});
	$("#fan").click(function(){
		$("input[name='nid']").each(function(){
			this.checked=!this.checked;
		});
	});
	$("#delAll").click(function(){
		if($("input[type='checkbox']:checked").length<1){
			$("#del").attr("disabled",true);
			window.location.reload();
		}
	});
});

      
      	<li><div class="button-group" id="butt"><span class="button border-main"><span class="icon-edit"></span>全选</span></div></li>
      	<li><div class="button-group" id="buttNo"><sapn class="button border-red"><span class="icon-trash-o"></span>全不选</sapn></div></li>
      	<li><div class="button-group" id="fan"><span class="button border-main"><span class="icon-edit"></span>反选</span></div></li>

我的全选全不选分开写了，你可以写成一个，需要进行判断一下

批量删除：批量删除就是通过获取你选中的ID(主键) 形成数组然后转化为字符串传到指定的方法中，在拆分成数组通过循环数组进行删除

	<li><div class="button-group" id="delAll" ><sapn class="button border-red" v-on:click="delAll()"><span class="icon-trash-o"></span>批量删除</sapn></div></li>

		<td><input type="checkbox" name="nid" :value="site.nid" v-model="whoms"  />{{key+1}}</td>

var vm=new Vue({
  el: '#app',
  data: {
    whoms:[],
    whom:""
  },

首先写好批量删除的按钮以及复选框的值把，获取到的值都放在whoms数组里面

delAll:function(key){
		  var whom=vm.whoms.join(",");
		  alert(whom);
		  $.post("/news/deleteAll",{whom:whom},function(data){
			 if(data==1){
				vm.sites.splice(key,1);
				 alert("删除成功");
			 }
		  })

然后通过**join()**把whoms数组合并成字符串，可以alert()；一下看看值是否一样
最后通过ajax传到指定的路径中，

@RequestMapping(value="deleteAll") 
@ResponseBody
public String deleteAll(HttpServletRequest request) {
	String whom=request.getParameter("whom");
	String[] id=whom.split(",");
	int len=id.length;
	for (int i = 0; i < len; i++) {
		newsService.deleteByNid(Integer.parseInt(id[i]));
	}
       return "1";
   }

传到指定的路径中通过split();对字符串进行拆分成数组再通过循环进行删除最后返回一个值，通过ajax接收，并输出相应的提示，删除完成后页面不会去掉已经删除的值需要刷新一次，但是事实上已经删除了不需要再次请求数据，了，这个时候就需要用到**splice（）**方法

if(data==1){
	vm.sites.splice(key,1);
	 alert("删除成功");
}

key的意思就是你的序号，1的意思就是删除的条数

但是这个是jq实现的全选和反选当你点击的时候是没法获取ID的只有你点的时候才行，那怎么办呢？？？

下次再说