为了美观,我还是引入了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";
}
}

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

最新文章

  1. DBUtils
  2. Python 之 for循环中的lambda
  3. java后台如何获取String 类型 json里的字段值
  4. 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
  5. Leetcode: Assign Cookies
  6. [Unity2D]脚本基类MonoBehaviour介绍
  7. WIN7 64位系统下的服务程序更新失败问题解决
  8. keil MDK中如何生成*.bin格式的文件
  9. NodeJS常用库说明
  10. Bundle类
  11. 游戏开发实验室的内部讲座总结----c++
  12. 使用oracle数据库,多用户同时对一个表进行增加,删除,修改,查看等操作,会不会有影响?
  13. 十六进制颜色与Color对象的互相转换[C#]
  14. C# winform 程序开发知识点总结(干货)
  15. npm killed有可能是内存不够, 为Ubuntu增加swap
  16. 一个老鸟发的公司内部整理的 Android 学习路线图
  17. Servlet学习1
  18. 闲聊javascript继承和原型
  19. Hadoop权威指南
  20. ArcGIS自定义工具箱-自增字段(可以设置初始值和步长)

热门文章

  1. cassandra高级操作之分页的java实现(有项目具体需求)
  2. 【C++】指针与引用的区别
  3. CF #404 (Div. 2) B. Anton and Classes (贪心)
  4. jQuery基础学习(二)&mdash;jQuery选择器
  5. JSON的数据类型
  6. C# SMTP发送邮件
  7. .Net Core MVC 过滤器(一)
  8. 你不得不知的逻辑或(||)与(&amp;&amp;)非(!)
  9. [Python Web]配置 nginx 遇到错误排查(初级)
  10. virtual box ubuntu 主机和虚拟机实现互相复制粘贴