效果展示：

完整代码如下：

<!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. ARMV8 datasheet学习笔记4：AArch64系统级体系结构之编程模型（4）- 其它

    1. 前言 2.可配置的指令使能/禁用控制和trap控制 指令使能/禁用 当指令被禁用,则这条指令就会变成未定义 指令Trap控制 控制某条或某些指令在运行时进入陷阱,进入陷阱的指令会产生trap异常 ...

  2. jvm系列三、java GC算法 垃圾收集器

    原文链接:http://www.cnblogs.com/ityouknow/p/5614961.html 概述 垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 ...

  3. 006_nginx动态upstream和安全检查模块

    一.参考Tengine   http://tengine.taobao.org/document_cn/http_dyups_cn.html ngx_http_dyups_module Descrip ...

  4. mysql分组排序取最大值所在行，类似hive中row_number() over partition by

    如下图, 计划实现 :按照 parent_code 分组, 取组中code最大值所在的整条记录,如红色部分.(类似hive中: row_number() over(partition by)) sel ...

  5. PYTHON-UDP

    1.TCP 和 UDP 发送数据时的流程 ***** 解释 为何TCP是可靠的 是因为发送数据后必须收到确认包 2. UDP的模板代码 ***** 1.UDP协议: (数据报协议) 特点: 无连接 优 ...

  6. tcpdump使用示例

    前言 这段时间一直在研究kubernetes当中的网络, 包括通过keepalived来实现VIP的高可用时常常不得不排查一些网络方面的问题, 在这里顺道梳理一下tcpdump的使用姿势, 若有写的不 ...

  7. C++ code：函数指针参数

    函数指针除了进行参数传递外,还承接申请的存储空间.释放空间等.而函数指针则主要是用来进行参数传递的,就像引用一样. 例如,我们来看一下函数指针的传递工作.在标准排序算法sort中,对于所提的整数容器v ...

  8. 【linux】crontab失效

    在linux上,crontab任务全部使用完整路径,但是任务无效. 检测crontab 服务是否启动, /etc/init.d/cron status /etc/init.d/cron restart

  9. php面向对象编程self和static的区别

    在php的面向对象编程中,总会遇到 class test{ public static function test(){ self::func(); static::func(); } public ...

  10. poj3481 splaytree模板题

    找不到错在哪里,先留着吧 /* splay是以键值排序的! 三个操作:1 a b,z增加键值为b的点,值为a 2,查询最大值 3,查询最小值 需要的操作:rotate,splay,insert,fin ...