JavaScript实现复选框的全选/全不选和批量选择

实现数据的批量选择以及全选/全部选功能的效果如下所示：
这里写图片描述

代码如下：

<a class="btn btn-default" id="search_like" style="margin-right: 5px;">搜索</a>
<a class="btn btn-success" id="search_export" href="">新增</a>
<a class="btn btn-primary" id="batch_del" onclick="delAllProduct()">删除</a>
...
<table id="dataTableExample" class="table table-bordered table-striped table-hover display"><thead><tr><th style="text-align:center;width:4%;"><input type="checkbox" name="CheckAll" value="" id="CheckAll"/></th><th style="width:15%">景点名称</th><th style="width:12%">景点代码</th></tr></thead><tbody><foreach name="sce_list" item="v"><tr><td style="text-align:center;width:4%;"><input type="checkbox" name="Check[]" value="{$v.sce_id}" id="Check[]"/></td><td title="{$v.sce_name}">{$v.sce_name}</td><td style="width:12%">{$v.basic_code}</td>  </tr></foreach></tbody></table><script type="text/javascript">//全选/全不选$("#CheckAll").bind("click",function(){           $("input[name='Check[]']").prop("checked",this.checked);          });//批量删除function delAllProduct(){if(!confirm("确定要删除景点信息吗？")){return ;}var cks = $("input[name='Check[]']:checked");var str="";//拼接所有的idfor(var i=0;i<cks.length;i++){if(cks[i].checked){str+=cks[i].value+",";}}//去掉字符串末尾的‘&'str=str.substring(0, str.length-1);// var a = str.split('&');//分割成数组// console.log(str);return false;$.ajax({type:'post',url:"{:U('Tour/batch_del')}",dataType:"json",data:{sce_id:str},success:function(data){console.log(data);return false;if(data['status'] == 1){alert('删除成功！');location.href=data['url'];}else{alert('删除失败！');return false;}}});}</script>

批量删除-后台代码（ThinkPHP3.2.3）：

//批量删除
public function batch_del(){$check_all = I('sce_id');// var_dump($check_all);die;$Scenic = M('travel_scenic_info');$where = 'sce_id in('.$check_all.')';  $scenic_list = $Scenic->where($where)->delete();// var_dump($scenic_list);die;if($scenic_list){$data['status'] = 1;$data['url'] = U('Tour/tour_list');$this->ajaxReturn($data);}else{$data['status'] = 0;$this->ajaxReturn($data);}
}