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数组长度问题代码说明
Jan 20 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 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
第七节 类的静态成员 [7]
2006/10/09 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
python生成日历实例解析
2014/08/21 Python
python中反射用法实例
2015/03/27 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
使用python进行拆分大文件的方法
2018/12/10 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
python学生管理系统的实现
2020/04/05 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
库房保管员岗位职责
2014/04/07 职场文书
环境卫生标语
2014/06/09 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
党课主持词大全
2015/06/30 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
Python基础之进程详解
2021/05/21 Python
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
MySQL优化之慢日志查询
2022/06/10 MySQL