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库的tab新形式使用
Nov 16 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
Jquery $when done then的用法详解
May 20 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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测试硬盘写入速度示例
2014/01/27 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
多种方法实现JS动态添加事件
2013/11/01 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
Angularjs---项目搭建图文教程
2016/07/08 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
微信小程序背景音乐开发详解
2019/12/12 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
详解Python编程中包的概念与管理
2015/10/16 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
OpenCV 边缘检测
2019/07/10 Python
python3 map函数和filter函数详解
2019/08/26 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
中学生差生评语
2014/01/30 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
后进生评语大全
2015/01/04 职场文书
2015中学学校工作总结
2015/07/20 职场文书
整脏治乱工作简报
2015/07/21 职场文书