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 相关文章推荐
javascript来定义类的规范小结
Nov 19 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
基于iview的router常用控制方式
May 30 Javascript
原生js实现轮播图特效
May 04 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php常用Stream函数集介绍
2013/06/24 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php不写闭合标签的好处
2014/03/04 PHP
php自定文件保存session的方法
2014/12/10 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Python学习入门之区块链详解
2017/07/25 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python生成密码字典的方法
2018/07/06 Python
Python3实现飞机大战游戏
2020/04/24 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
应届大学生简历中的自我评价
2014/01/15 职场文书
大课间体育活动方案
2014/03/12 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
民事和解协议书格式
2014/11/29 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书