失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > JavaScript实现复选框的全选/全不选和批量选择

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

时间:2018-08-01 11:49:27

相关推荐

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);}}

如果觉得《JavaScript实现复选框的全选/全不选和批量选择》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。