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 相关文章推荐
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
详解JavaScript自定义函数
Jul 29 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
随机广告显示(PHP函数)
2006/10/09 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
javascript基础知识讲解
2017/01/11 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
pycharm显示远程图片的实现
2019/11/04 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
80后职场人的职业生涯规划
2014/03/08 职场文书
《桥》教学反思
2014/04/09 职场文书
交通事故协议书范本
2014/11/18 职场文书
医院科室评语
2015/01/04 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
正则表达式基础与常用验证表达式
2022/06/16 Javascript