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 渐变下拉菜单
Dec 15 Javascript
ExtJS 入门
Oct 29 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
javascript实现微信分享
Dec 23 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 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 星际争霸
PHP安全配置详细说明
2011/09/26 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
js脚本实现数据去重
2014/11/27 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
基于jquery实现日历签到功能
2020/09/11 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
vue-router命名视图的使用讲解
2019/01/19 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
Python实现多行注释的另类方法
2014/08/22 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
三项教育活动实施方案
2014/03/30 职场文书
教师党员个人自我评价
2015/03/04 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记