checkbox复选框全选批量删除

多选框全选实现批量删除

html代码

  

<body>
	<form action="" method="post" name="FormName" onsubmit="return checkbox();">
		<table >
			<tr ><td><input type="checkbox" name="checkboxes[]" onclick="selectAll(this,‘checkboxes‘)" /></td><td>全选</td></tr>  this代表windows窗口对象
			<tr>
				<td><input type="checkbox" name="checkboxes[]" value="2" /><td>游泳</td></td>
			</tr>
			<tr><td><input type="checkbox" name="checkboxes[]" value="1" /><td>绘画</td></td></tr>
			<tr><td><input type="checkbox" name="checkboxes[]" value="4" /><td>跑步</td></td></tr>
		</table>          <input type="hidden" id="getvalues" name="getvalues"/> 隐藏域传参数
		<button id="batch-delete-btn">批量删除</button>     </form></body>

1.问题:怎么单击一个复选框实现全选

js代码实现

<script type="text/javascript">
    function selectAll(obj, chk)
{
  if (chk == null)
  {
    chk = ‘checkboxes‘;
  }
   var elems = obj.form.getElementsByTagName("INPUT");
  for (var i=0; i < elems.length; i++)
  {
    if (elems[i].name == chk || elems[i].name == chk + "[]")
    {
      elems[i].checked = obj.checked;
     }
  }
}
</script>

2.怎么把选中的id通过action传给php进行处理

通过juqery获取所有选中的box的value值,赋给一个变量,同时设置一个隐藏域把变量赋给隐藏域的value,通过POST提交,使得php页面获取所有id值

<script type="text/javascript">
    $(function(){
        $(‘#batch-delete-btn‘).click(function(){
             checked = [];
            $(‘input:checkbox:checked‘).each(function() {
                checked.push($(this).val());
            });
            $(‘#getvalues‘).val(checked);  给隐藏域设置属性
        })

    })
</script>

 问题1.批量删除前判断是否有box选中

function checkbox() {
        var checkboxs=document.getElementById(‘getvalues‘).value;   如果隐藏域value为空表示没有被选中,return false 组织表单提交跳转,否则再次确定是否删除,确定返回true 表单跳转处理

        if(!checkboxs){
            alert(‘请选择要删除的会员‘);
            return false;
        }else{
            confirm(‘确定批量删除?‘);
        }

    }

 为题2.如果直接选择全选按钮选中全部,则在返回的id中   第一个全选按钮返回值为on  所以需要把on 元素删除

on,6039,6038,6037,6036,6035,6034,6033,6032,6031,6030,6029,6027,6026,6025,6024

3.php页面对id元素处理

if(isset($_REQUEST[‘getvalues‘])){   //批量删除会员
        $str=$_REQUEST[‘getvalues‘];   返回的为一个字符串,如上
        $arrid=explode(‘,‘,$str);    拆分字符串,如果为直接全选删除第一个元素
        if($arrid[0]==‘on‘){        
            array_shift($arrid);
        }
        foreach($arrid as $v){    遍历元素直接删除,也可以不便利直接把字符串传进sql语句里 id IN(+‘$str‘+);
            deleteUserById($v);
            deleteIdentityApproveByUserId($v);
            admin_log(‘会员信息删除-‘.$v, ‘edit‘, ‘user‘);
        }
        showMsg(‘删除成功!‘,‘member.php?act=add‘,‘member.php?act=list‘);
    }

  

时间: 2024-10-12 15:15:50

checkbox复选框全选批量删除的相关文章

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

checkbox全选/全不选,子复选框全选父复选框选中

<input type="checkbox" class="optionListAll">/* 父复选框 */ <input type="checkbox" name="optionList"> <input type="checkbox" name="optionList"> <input type="checkbox" n

jQuery 复选框全选/取消全选/反选

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

jQuery实现复选框全选/全部取消/反选/获得选择的值

本地单文件上传脚本,命名uf 这是在本机上做的测试,利用bpcs_uploader脚本实现,只是进行简单的封装,自动完善云端文件路径. 技术要点:使用dirname获取文件所在目录,使用pwd获取文件完整路径,并作为云端文件路径. #!/bin/bash cur_dir=$(cd "$(dirname "$1")"; pwd) name=$(basename "$1") /home/grm/bin/bpcs_uploader/bpcs_uploa

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

javascript实现复选框全选和取消代码分析

javascript实现复选框全选和取消代码分析:复选框是常用的元素之一,而点击实现全选和取消全选又是最为常用的功能,特别是在批量操作管理中,非常的方便,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.soft

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

js 判断 复选框全选、全不选、反选、必选一个

一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<