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实现使用输入input和改变change事件模拟手动输入

    js实现使用输入input和改变change事件模拟手动输入

    聚焦于JavaScript中的输入模拟技术,本指南将带你探索如何使用input和change事件来创造逼真的手动输入效果,通过简单的代码实现,你将掌握这一实用的技巧,为你的Web应用增添交互的乐趣,需要的朋友可以参考下
    2024-03-03
  • 微信小程序输入多行文本的实战记录

    微信小程序输入多行文本的实战记录

    多行输入框组件是原生组件,这篇文章主要给大家介绍了关于微信小程序输入多行文本的相关资料,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • js时间戳与日期格式之间相互转换

    js时间戳与日期格式之间相互转换

    这篇文章主要为大家详细介绍了js时间戳与日期格式之间相互转换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • js+html5实现canvas绘制椭圆形图案的方法

    js+html5实现canvas绘制椭圆形图案的方法

    这篇文章主要介绍了js+html5实现canvas绘制椭圆形图案的方法,涉及html5图形绘制的基础技巧,感兴趣的朋友可以参考一下
    2016-05-05
  • 如何在项目中使用log4.js的方法步骤

    如何在项目中使用log4.js的方法步骤

    这篇文章主要介绍了如何在项目中使用log4.js的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 我的javascript 函数链之演变

    我的javascript 函数链之演变

    我的javascript 函数链之演变,需要的朋友可以参考下。
    2011-04-04
  • 封装一个公用Echarts图表组件的3种模板代码示例

    封装一个公用Echarts图表组件的3种模板代码示例

    这篇文章主要给大家介绍了关于封装一个公用Echarts图表组件的3种模板,定义图表公共样式是为了统一同一网站各页面图表的基础样式,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • js操作IE浏览器弹出浏览文件夹可以返回目录路径

    js操作IE浏览器弹出浏览文件夹可以返回目录路径

    这篇文章主要介绍了js操作IE浏览器弹出浏览文件夹并可以返回目录路径,需要的朋友可以参考下
    2014-07-07
  • Javascript基于AJAX回调函数传递参数实例分析

    Javascript基于AJAX回调函数传递参数实例分析

    这篇文章主要介绍了Javascript基于AJAX回调函数传递参数的方法,结合实例形式较为详细的分析了JavaScript使用ajax传递参数的相关技巧以及回调函数的实现技巧,需要的朋友可以参考下
    2015-12-12
  • 小程序实现手写签名功能

    小程序实现手写签名功能

    这篇文章主要为大家详细介绍了小程序实现手写签名功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论