js实现批量删除功能

 更新时间:2020年08月27日 09:15:39   作者:mo-2016  
这篇文章主要为大家详细介绍了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("请求失败!");
      }
    });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS监听dom高度变化几种常用方法总结

    JS监听dom高度变化几种常用方法总结

    我们在开发中会遇到一些需求,需要监听元素变化,比如元素属性变化,元素大小变化,这篇文章主要给大家介绍了关于JS监听dom高度变化几种常用方法的相关资料,需要的朋友可以参考下
    2023-10-10
  • 一起来写段JS drag拖动代码

    一起来写段JS drag拖动代码

    记得几年前刚接触前端的时候,觉得能在网页上拖移元素是一件很爽的事,能写一段这样的代码是件很了不起的事情,于是乎google,baidu蛮多代码来学习,大致明白了思路,总结如下
    2010-12-12
  • javascript DOM的详解及实例代码

    javascript DOM的详解及实例代码

    这篇文章主要介绍了javascript DOM的详解及实例代码的相关资料,需要的朋友可以参考下
    2017-03-03
  • js中遍历Map对象的简单实例

    js中遍历Map对象的简单实例

    下面小编就为大家带来一篇js中遍历Map对象的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Postman的FormData传参的使用示例详解

    Postman的FormData传参的使用示例详解

    今年上半年因为做毕设的原因,有自己接触到后端,也是用过了postman去测试接口,看到了postman那边的参数形式,一直对这个formData有想法,今天通过本文给大家介绍Postman的FormData传参的使用,感兴趣的朋友一起看看吧
    2023-10-10
  • 微信小程序开发之你可能没有踩过的神坑总结

    微信小程序开发之你可能没有踩过的神坑总结

    最近在做一个小程序的项目,所以记录下开发过程中遇到的坑,这篇文章主要给大家介绍了关于微信小程序开发之你可能没有踩过的神坑,需要的朋友可以参考下
    2021-09-09
  • 微信小程序wxss如何引用外部CSS文件以及iconfont

    微信小程序wxss如何引用外部CSS文件以及iconfont

    这篇文章主要给大家介绍了关于微信小程序wxss如何引用外部CSS文件以及iconfont的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • js实现web留言板功能

    js实现web留言板功能

    这篇文章主要为大家详细介绍了js实现web留言板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Bootstrap每天必学之按钮(一)

    Bootstrap每天必学之按钮(一)

    Bootstrap每天必学之按钮,本文讲解的就是大家最为常用的button按钮的样式,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS使用H5实现图片预览功能

    JS使用H5实现图片预览功能

    这篇文章主要为大家详细介绍了JS使用H5实现图片预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论