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中的排序算法代码
Feb 22 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
xml转json的js代码
Aug 28 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
keras打印loss对权重的导数方式
2020/06/10 Python
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
化学教师自荐信范文
2013/12/28 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
婚前财产公证书
2014/04/10 职场文书
小学音乐课教学反思
2016/02/18 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android