js实现批量删除功能


Posted in Javascript onAugust 27, 2020

本文实例为大家分享了js实现批量删除功能的具体代码,供大家参考,具体内容如下

界面如下:

js实现批量删除功能

勾选复选框会自动记录id,设置value=“id”即可
下面是全选操作(js):
其中开头的复选框的id为:delete_checkbox

下面记录条的复选框的name为:delete_checkbox

if($("input[id='delete_checkbox']").is(':checked')==true){
      $('input[name="delete_checkbox"]').each(function(){
        $(this).prop("checked",true);
      });
    }else{
      $('input[name="delete_checkbox"]').each(function(){
        $(this).prop("checked",false);
      });
    }

在批量删除按钮加一个点击执行的方法:user_delete()

点击批量删除后执行的代码如下:

//点击批量删除按钮
  function user_delete() {
    //获取已经勾选的复选框
    let checkedId=new Array();  //定义一个数组来保存已选中的value值
    $('input[name="delete_checkbox"]:checked').each(function(){
      if(!isNaN($(this).val())){
        checkedId.push($(this).val());
      }else{
        console.log("拿不到");
      }
    });
    if(checkedId.length == 0){
      alert("请选择要删除的信息!");
      return false;
    }
    console.log("拿到的数组为:"+checkedId);
    console.log("拿到的字符串为:"+checkedId.toString());
    //进行批量删除操作
    $.ajax({
      type:"POST",
      url:"",
      data:{"id":checkedId.toString()},
      success:function (data) {
        alert("请求返回的信息!");
        location.reload();   //重新刷新页面
      },
      error:function () {
        alert("请求失败!");
      }
    });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
jquery 选取方法都有哪些
May 18 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
node.js中watch机制详解
Nov 17 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
js利用拖放实现添加删除
Aug 27 #Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
Javascript call及apply应用场景及实例
Aug 26 #Javascript
Javascript类型判断相关例题及解析
Aug 26 #Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 #Javascript
Javascript如何实现扩充基本类型
Aug 26 #Javascript
Javascript var变量删除原理及实现
Aug 26 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
社区(php&&mysql)一
2006/10/09 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
php 动态多文件上传
2009/01/18 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
XML的代替者----JSON
2007/07/21 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Python面向对象类的继承实例详解
2018/06/27 Python
实例详解Python装饰器与闭包
2019/07/29 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
职业生涯规划书范文
2014/03/10 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
银行贷款收入证明
2014/10/17 职场文书
2015年除四害工作总结
2015/07/23 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
Python道路车道线检测的实现
2021/06/27 Python