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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
Vue配置marked链接添加target="_blank"的方法
Jul 19 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
Vue实现简单的跑马灯
May 25 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下MAIL的另一解决方案
2006/10/09 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
Ref与out有什么不同
2012/11/24 面试题
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
区级文明单位申报材料
2014/05/15 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
通信工程求职信
2014/07/16 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
2014年基建工作总结
2014/12/12 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis