實(shí)現(xiàn)數(shù)據(jù)的批量選擇以及全選/全部選功能的效果如下所示：

代碼如下：

<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%">景點(diǎn)名稱</th><th style="width:12%">景點(diǎn)代碼</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("確定要刪除景點(diǎn)信息嗎？")){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('&');//分割成數(shù)組// 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);} }

總結(jié)

以上是生活随笔為你收集整理的JavaScript实现复选框的全选/全不选和批量选择的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。