为了美观,我还是引入了bootstrap的模态框,我引入的是自己的数据库 library中的一张表 名为:maninfo表 是一张个人信息表

 表的加载我就不写了,比较简单,  大概写一下需要的按钮和html部分就可以了

      <button type="button" class="btn btn-primary"   id="plscdz" >批量删除</button>
全选:<input type="checkbox" id="cq"/>

遍历出来的复选框为

<input type="checkbox" value="{$v[0]}" class="cq"/>

首先是全选按钮点击之后可以把遍历的复选框全部选中

<script type="text/javascript">
$("#cq").click(function(){ $(".cq").prop("checked",$(this).prop("checked"));
}) </script>

 这里我只写了一个简单的模态框

 <div class="modal fade" id="myModal11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabel">
提示
</h4>
</div>
<div id="qrnr1" class="modal-body">
您将删除选中的图书!
</div>
<div class="modal-footer">
<button id="qxplsc" type="button" class="btn btn-default" data-dismiss="modal">取消删除</button>
<button id="qrplsc" type="button" class="btn btn-primary">确认批量删除</button> </div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div> </div>

这样前端的内容就完成了,这样就开始写js部分了,我全部用的是jquery

  var chk = "";
var check2 = "";
//判断多个复选框中的某一个是否被实现
function checked(){
var count = 0;
var checkx = $("#cq");
if(checkx.checked)
{
check2=1;//选中全选按钮
}
else
{
check2=0;//没选中全选按钮
}
var checkArry = $(".cq");
for (var i = 0; i < checkArry.length; i++)
{
if(checkArry[i].checked == true)
{
//选中的操作
count++;
}
}
if( count == 0 )
{
chk=0;//没有选中项
}
else
{
chk=1;//有选中项
}
//alert(chk);
} function plscdzxx()
{
//批量删除
$("#plscdz").click(function(){
checked();
if(chk==1 || check2==1){// 提交
$('#myModal12').modal('show');
$("#nqrplsc").click(function(){/*给确认删除按钮加事件*/
$('#myModal12').modal('hide');
//找选中的主键值,用循环遍历选中的主键值
var cq =$(".cq");
var plstr ="";
for(var i=0;i<cq.length;i++)
{
if(cq.eq(i).prop("checked"))
{
plstr+=cq.eq(i).val()+"','";
}
}
plstr= plstr.substr(0,plstr.length-3); //分隔符占3个字符,截取字符串,去掉最后的"','",这样正好匹配SQL语句
$.ajax({
async:false,
url:"plscdz.php",
data:{plstr:plstr},
dataType:"TEXT",
type:"POST",
success:function(data){
if(data.trim()=="OK")
{
alert("删除成功");
nload(); //在这里要重新加载一遍页面
}
else
{
alert("删除失败");
}
}
});
});
}
else if(chk==0)
{
// 不提交
//alert(chk);
alert("请选择您要删除的内容");
} })
}

ajax会连接到批量删除的处理页面 ,下面就是批量删除的处理页面了

<?php
session_start();
include("DBDA.class.php");
$db = new DBDA(); if(!empty($_POST["plstr"]))
{
$plstr = $_POST["plstr"];
$sql = "delete from maninfo where id in ('{$plstr}')";
if($db->Query($sql,0))
{
echo "OK";
}
else
{
echo "NO";
}
}

写到这儿 如果您要是自己尝试的话,可能不运行,这就需要把批量删除的方法给调一下,前面有加载的方法的话,那就直接把批量删除的方法写到加载方法里面调用就可以了

php jquery+ajax写批量删除的更多相关文章

  1. confirm对话框取消后阻止ajax操作、ajax做批量删除

    在做批量删除的时候,需要用confirm弹出一个提示框让用户确认是否删除,点击确定,执行操作,点击取消,取消操作.但是如果使用ajax把选中项的主键值传到处理页面处理时,如果使用下面的方法将confi ...

  2. 如何用jquery+ajax写省市区的三级联动?(封装和不封装两种方式)-----2017-05-14

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

  3. MVC3学习:利用mvc3+ajax实现全选和批量删除

    本例数据库操作使用EF code first; 先利用mvc自带的模板,先生成一个list视图,然后再手动添加复选框和删除按钮 <table> <tr> @*在标题行添加一个全 ...

  4. 作业:汽车查询--弹窗显示详情,批量删除 ajax做法(0521)

    作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  5. 作业:汽车查询--弹窗显示详情,批量删除 php做法(0521)

    作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  6. 5月21 汽车查询及批量删除----php方法

    ---恢复内容开始--- 这个与之前不同是在php中实现了页面的查询,引用AJAX实现批量删除及弹窗的显示 作业要求: 页面显示数据代码: <!DOCTYPE html PUBLIC " ...

  7. tp5 ajax批量删除(自写)

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

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

    效果展示: 完整代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse ...

  9. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

随机推荐

  1. Oeacle创建表空间

    /*第1步:创建临时表空间 */ create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle9i\user_tem ...

  2. java 8 Hashmap深入解析 —— put get 方法源码

    每个java程序员都知道,HashMap是java中最重要的集合类之一,也是找工作面试中非常常见的考点,因为HashMap的实现本身确实蕴含了很多精妙的代码设计. 对于普通的程序员,可能仅仅能说出Ha ...

  3. cloud-init 工作原理 - 每天5分钟玩转 OpenStack(171)

    cloud-init 是 linux 的一个工具,当系统启动时,cloud-init 可从 nova metadata 服务或者 config drive 中获取 metadata,完成包括但不限于下 ...

  4. [SinGuLaRiTy] ZKW线段树

    [SinGuLaRiTy-1007] Copyrights (c) SinGuLaRiTy 2017. All Rights Reserved. 关于ZKW线段树 Zkw线段树是清华大学张昆玮发明非递 ...

  5. Uva 11029 Leading and Trailing (求n^k前3位和后3位)

    题意:给你 n 和 k ,让你求 n^k 的前三位和后三位 思路:后三位很简单,直接快速幂就好,重点在于如何求前三位,注意前导0 资料:求n^k的前m位 博客连接地址 代码: #include < ...

  6. android开发之-查看、编辑手机sqlite数据库文件-实测

    效果图: 1.开始——运行——输入cmd ,输入adb shell,错误:一是“adb不是内部命令或外部命令,也不是可运行的程序或批处理文件”,二是“error:device not found”. ...

  7. 上传图片转为base64格式预览并压缩图片(不兼容IE9以下浏览器,兼容移动端ios,android)

    前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...

  8. [讨论] Window XP 安装msxml6后,load xml时提示schema验证失败

    现象:在windows XP x64下,使用用户安装的msxml6库加载xml文件时失败. 进一步说明: 该xml文档使用了W3C的名称空间 xmlns:xsi= "http://www.w ...

  9. Win7+CentOS双系统(二)

    在之前的文章中我们实现了Win7+CentOS6.3双系统的安装和使用,不过比较不幸的是在CentOS6.4版本时其安装文件大小已经超过了FAT文件系统所能容纳的单个文件大小4G.我们使用FAT文件系 ...

  10. 最新windows 0day漏洞利用

    利用视屏:https://v.qq.com/iframe/player.html?vid=g0393qtgvj0&tiny=0&auto=0 使用方法 环境搭建 注意,必须安装32位p ...