效果展示：

完整代码如下：

<!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>

ajax批量删除功能的实现源代码的更多相关文章

  1. 实例：SSH结合Easyui实现Datagrid的批量删除功能

    在我先前的基础上面添加批量删除功能.实现的效果如下 删除成功 通常情况下删除不应该真正删除,而是应该有一个标志flag,但flag=true表示状态可见,但flag=false表示状态不可见,为删除状 ...

  2. SSM实现批量删除功能

    批量删除功能的实现 其实实现这个功能还是挺简单的 因为我这是直接拼接的,所以用了DOM方法来获取id话不多说直接上代码首先是复选框全选和反选这里的话 获取最上面一个复选框的状态同步到拼接的复选框  $ ...

  3. layui表格的批量删除功能

    // 批量删除功能 // 1.得到table选中行内容 // 2.得到删除需要的唯一值,一般是id; // 3.将所要删除的项加入到数组中: // 4.判断是否选中: // 5.发送ajax请求,并附 ...

  4. Think5之ajax批量删除数据功能

    //批量删除学员信息 public function deleteMany() { $id = input('post.'); //判断id是数组还是一个数值 if(is_array($id)){ f ...

  5. Mvc音乐商店demo的ajax异步删除功能总结

    刚刚从学校出来参加工作,没啥工作经验,所以各位大神们不要嘲笑哈! 来公司后要进行培训,给我们的作业中有一个使用 dapper+mvc+ajax+SQL Server 2008,来实现一个音乐商店的de ...

  6. checkbox批量删除功能

    参考:http://www.jb51.net/article/35338.htm 感谢作者 代码片段:jsp <c:forEach items="${infolist }" ...

  7. 原生PHP+原生ajax批量删除（超简单），ajax删除，ajax即点即改,完整代码，完整实例

    效果图: 建表:company DROP TABLE IF EXISTS `company`;CREATE TABLE `company` ( `id` int(11) NOT NULL AUTO_I ...

  8. tp5 ajax批量删除（自写）

    html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. tp5 全选，全不选 ，ajax批量删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Ubuntu/Debian 微信安装

    1. 更新系统 $ sudo apt-get update $ sudo apt-get install git-core curl build-essential openssl libssl-de ...

  2. Git入门——远程仓库及分支管理

    关于本地版本库的操作,请见:Git入门--本地版本库操作 本篇提到的所有命令: 小结 前面提到,Git相对于传统的SVN有着很大的优势,其中之一就在于集中式系统中,版本库只能存在于中央服务器上:而在G ...

  3. YOLO(v1)

    <You Only Look once:Unified,Real-Time Object Dectection> 以前的图像检测网络其实都是在分类网络的基础上进行修改,而YoLo是将检测问 ...

  4. BN讲解（转载）

    本文转载自:http://blog.csdn.net/shuzfan/article/details/50723877 本次所讲的内容为Batch Normalization,简称BN,来源于< ...

  5. 关于出现Not an editor command: Bundle '**/*.vim'的解决方案【转】

    转自:https://blog.csdn.net/YHM07/article/details/49717933 操作系统: $ uname -r 2.6.32-573.7.1.el6.x86_64 $ ...

  6. 解析如何在C语言中调用shell命令的实现方法【转】

    本文转自:http://www.jb51.net/article/37404.htm 1.system(执行shell 命令)相关函数 fork,execve,waitpid,popen表头文件 #i ...

  7. DataTables 1.10.x与1.9.x参数名对照表

    Datatables 1.10.x在命名上与1.9.x的有区别,新版的使用的是驼峰的命名规则,而之前的是采用匈牙利命名规则 当然,这些变化都是向下兼容的,你可以继续使用旧版本的api方法的参数和名称. ...

  8. 如何用enable_shared_from_this 来得到指向自身的shared_ptr 及对enable_shared_from_this 的理解

    在看<Linux多线程服务端编程:使用muduo C++网络库> 的时候,在说到如何防止在将对象的 this 指针作为返回值返回给了调用者时可能会造成的 core dump.需使用 ena ...

  9. iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图

    iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图: <!-- Safari浏览器[添加到书签] --> <link rel="sh ...

  10. 最大流算法-最高标号预流推进(HLPP)

    昨天我们学习了ISAP算法,它属于增广路算法的大类.今天学习的算法是预流推进算法中很高效的一类--最高标号预流推进(HLPP). 预流推进 预流推进是一种很直观的网络流算法.如果给到一个网络流让你手算 ...