ajax批量删除功能的实现源代码

效果展示:

完整代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>Ding Jianlong Html</title><link  href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/layer/2.4/skin/layer.min.css" rel="stylesheet">
</head>
<body><div class="container"><button class="btn btn-danger radius" onClick="batch_del()" style='margin:10px;'>批量删除</button><table style="width: 500px;" class="table table-striped table-hover table-bordered"><thead><tr><th scope='col' width="25"><input type="checkbox" value="" name="selectall"></th><th scope='col' width="80">ID</th><th scope='col' >标题</th></tr></thead><tbody><tr><td><input type="checkbox" value="10001"></td><td>10001</td><td >标题1</td></tr><tr><td><input type="checkbox" value="10002"></td><td>10002</td><td >标题2</td></tr><tr><td><input type="checkbox" value="10003"></td><td>10003</td><td >标题3</td></tr><tr><td><input type="checkbox" value="10004"></td><td>10004</td><td >标题4</td></tr><tr><td><input type="checkbox" value="10005"></td><td>10005</td><td >标题5</td></tr></tbody></table></div><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.4/layer.min.js"></script>
<script>/*批量选中的效果*/$('input:checkbox[name="selectall"]').click(function(){if($(this).is(':checked')){$('input:checkbox').each(function(){$(this).prop("checked",true);});}else{$('input:checkbox').each(function(){$(this).prop("checked",false);});}});/*获取ids,批量删除*/function batch_del() {var ids = '';$('input:checkbox').each(function(){if(this.checked == true){ids += this.value + ',';}});//layer.alert(ids);return;//下面的ajax根据自己的情况写layer.confirm('批量删除后不可恢复,谨慎操作!', {icon: 7, title: '警告'}, function (index) {$.ajax({type: 'POST',url: '你的url地址?ids=' + ids,data: {"1": "1"},dataType: 'json',success: function (data) {if (data.code == 200) {$(obj).parents("tr").remove();layer.msg(data.message, {icon: 1, time: 1000});} else {layer.msg(data.message, {icon: 2, time: 3000});}},error: function (data) {console.log(data.msg);},});});}
</script>
</body>
</html>