jQuery实现全选/反选和批量删除

//全选/全不选

$(function(){

//初始化时候,删除按钮隐藏  

$("input[name='Delete'").css("display",'none');

  $("#CheckAll").bind("click",function(){    

$("input[name='Check[]']").prop("checked",this.checked);  

  //显示删除按钮    

if(this.checked == true){      

  $("input[name='Delete'").css("display",'block');  

 }else{    

  $("input[name='Delete'").css("display",'none');

   }   });

 

//批量删除  

$("#Delete").click(function(){  

    if(confirm('确定要删除所选吗?')){  

         var checks = $("input[name='Check[]']:checked");      

    if(checks.length == 0){ alert('未选中任何项！');return false;}        

   //将获取的值存入数组        

 var checkData = new Array();    

     checks.each(function(){              checkData.push($(this).val());     });  

      alert("选中要删除的id值为:"+checkData);    

    console.log("选中要删除的id值为:"+checkData);      

//提交数据到后台进行删除  

 }   });

var Alllen = $("input:checkbox").length-1; //总个数减一 3  

 //当所有复选框选中时,全选勾选;当不是所有复选框选中时,全选不勾选.只要有其中一个复选框选中,删除按钮显示  

  $("input[name='Check[]']").on("change",function(){    

   var len = $("input[name='Check[]']:checkbox:checked").length;      

 if(len==Alllen){    

  //全选         $('#CheckAll').prop('checked',true);      

  $("input[name='Delete'").css("display",'block');  

  }else{      

  $('#CheckAll').prop('checked',false);//小于3的时候全选框不勾选        

if(len>=1){          

$("input[name='Delete'").css("display",'block');    

  }else{        

  $("input[name='Delete'").css("display",'none'); //等于0的时候删除按钮隐藏    

  }  

 }   }); });

 

<div id="con">  

 <table width="100%" cellspacing="1" cellpadding="0">    

   <tr align="left">            

 <td colspan="3">全选/反选</td>  

    </tr>    

 <tr align="center">        

    <th><input id="CheckAll" name='CheckAll' type='checkbox'></th>           

  <th>ID</th>  

  <th>Name</th>            

<th>Date</th>      

</tr>  

  <tr align="center">            

 <td><input id='myCheck' name='Check[]' type='checkbox' value="1"></td>           

<td>10001</td>          

<td>胡静</td>            

<td>2015-12-01</td>    

</tr>    

<tr align="center">            

 <td><input id='myCheck' name='Check[]' type='checkbox' value="2"></td>             

<td>10002</td>            

<td>马思纯</td>          

 <td>2015-12-02</td>    

</tr>    

<tr align="center">             

<td><input id='myCheck' name='Check[]' type='checkbox' value="3"></td>             

<td>10003</td>            

<td>倪景阳</td>          

<td>2015-12-03</td>     

</tr> </table>     

<div id="bottom">      <input id="Delete" name="Delete" type="button" value=" 删 除 " class="btn btn-danger radius"/>    </div>  </div>

转载于:https://www.cnblogs.com/chengshixiaonongming/p/10412807.html