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 相关文章推荐
js getElementsByTagName的简写方式
Jun 27 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
js实现滚动条自动滚动
Dec 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
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python每次处理固定个数的字符的方法总结
2013/01/29 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python中常见的数据类型小结
2015/08/29 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python树莓派红外反射传感器
2019/01/21 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
理工类毕业自我鉴定
2014/02/20 职场文书
通报表扬范文
2015/01/17 职场文书
化验室安全管理制度
2015/08/06 职场文书
消防安全培训工作总结
2015/10/23 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书