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实现的完美渐变弹出层效果代码
Apr 02 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php存储过程调用实例代码
2013/02/03 PHP
浅析php学习的路线图
2013/07/10 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
JS简单计算器实例
2015/01/20 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
对python 命令的-u参数详解
2018/12/03 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
Overload和Override的区别
2012/09/02 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
大学校运会广播稿
2014/02/03 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis