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 相关文章推荐
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
JavaScript实现淘宝商品图切换效果
Apr 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 daodb插入、更新与删除数据
2009/03/19 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
js form action动态修改方法
2008/11/04 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
python 中文乱码问题深入分析
2011/03/13 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Python类如何定义私有变量
2020/02/03 Python
Python实现对adb命令封装
2020/03/06 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Python偏函数实现原理及应用
2020/11/20 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
老公保证书范文
2014/04/29 职场文书
心理学专业求职信
2014/06/16 职场文书
党员剖析材料范文
2014/09/30 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
大学团日活动总结书
2015/05/11 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
亲情作文之母爱
2019/09/25 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python