转摘:http://javaweb1024.com/qianduan/jQuery/2015/04/13/544.html

功能描述:多选框勾选以后(全部或者部分),需要想后台提交已勾选的数据(Ajax传输),并删除所选数据。一行的数据是以table来划分,页面要删除本行!

代码 :

存放 checkbox的ID值deleteIds=[];

存放行table数据trs=[];

选中的checkbox:

$targets=$("input[name='id']:checked");

遍历选中的值

$targets.each(function(i,o){

trs.push($(this).closest("table"));

deleteIds.push("deleteId="+$(this).val());

});

Ajax的URL传递方式

url: "deletes.jhtml?"+deleteIds.join("&"),

Ajax返回以后删除选中的行

$(trs).each(function(i,o){

o.remove();

});

最后在Ajax的success中需要清空 deleteIds trs

附全选按钮JS代码:

var $selectAll=$("input.select-all");
 $selectAll.click(function(){
    var $targets=$("input[name='id']");
    if($targets.length>0){
        if(this.checked){
              $selectAll.attr("checked","checked");
              $targets.attr("checked","checked")
        }else{
               $selectAll.removeAttr("checked","checked");
               $targets.removeAttr("checked","checked")
        }
    }
});

Checkbox的选中删除功能且Ajax返回后清除所选行的更多相关文章

  1. jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

    1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...

  2. 02 - Unit07:显示笔记下拉菜单、笔记的分享功能、笔记的删除功能

    显示笔记下拉菜单 笔记的分享功能 发送Ajax请求 绑定事件:绑定分享按钮单击事件 参数获取:笔记ID 发送请求:/share/add.do 服务器处理 ShareController ShareSe ...

  3. ajax“显示弹窗详情”和“删除”功能练习

    1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>a ...

  4. ajax中网页传输(一)TEXT——带有删除功能的数据库表格显示练习

    网页之间传输的三种方式:TEXT.JSON.XML. 本章将讲解带有TEXT形势的ajax网页传输 第一:body部分代码 <title>ajax中TEXT讲解并且带有删除功能的表格< ...

  5. Mvc音乐商店demo的ajax异步删除功能总结

    刚刚从学校出来参加工作,没啥工作经验,所以各位大神们不要嘲笑哈! 来公司后要进行培训,给我们的作业中有一个使用 dapper+mvc+ajax+SQL Server 2008,来实现一个音乐商店的de ...

  6. react.js CMS 删除功能的实现

    页面效果图: 数据操作分析: 在查询表组件的  TableData.js 中操作如下内容: 给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(fo ...

  7. 使用EasyUI实现加入和删除功能

    增删该查是不论什么一个项目都少不了的功能操作.这篇博文主要简单介绍一下怎样使用EasyUI实现加入和删除功能. 首先.导入EasyUI的js代码: <link href="~/Easy ...

  8. 实例:SSH结合Easyui实现Datagrid的批量删除功能

    在我先前的基础上面添加批量删除功能.实现的效果如下 删除成功 通常情况下删除不应该真正删除,而是应该有一个标志flag,但flag=true表示状态可见,但flag=false表示状态不可见,为删除状 ...

  9. layui 数据表格+分页+搜索+checkbox+缓存选中项数据

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索,  还有checkbox,  支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...

随机推荐

  1. Java中的抽象类

    含有抽象方法的类,抽象方法即用abstract修饰的方法,即父类只知道其子类应该含有该方法,但无法知道子类如何实现这些方法 抽象类限制规定子类必须实现某些方法,但不关注实现细节 抽象类中可以包含普通方 ...

  2. Visual Studio 2012 应用软件开发新方式

    微软正式发布Visual Studio 2012 应用软件开发新方式 2012-09-13 09:54 51CTO.com 我要评论(0) 字号:T | T “现在,开发者将有更好的机会开发与云服务连 ...

  3. Android imageview显示圆形图片

    需要ImageView显示圆形图片做法如下 public static Bitmap toRoundCorner(Bitmap bitmap, float ratio) { System.out.pr ...

  4. ubuntu后台运行命令行

    ubuntu 程序后台运行几个方法 . 程序后加上“&” ,即 “./myjob &”, 将命令放入到一个作业队列中,可以用命令“jobs” 查看 . 将1中的命令放在 “()”中, ...

  5. IP 网际协议

    1. IP数据首部长度: 4位版本号 : 4 位,用于标明 IP 版本号,0100 表示 IPv4,0110 表示 IPv6.目前常见的是 IPv4. 4位首部长度: 首部长度是占4位,可表示的最大十 ...

  6. java学习笔记----数据类型,变量,常量

    一.数据类型 1.基本类型(8种,又称内置数据类型).6种数字类型(byte,short,int,long,float,double),一种字符型(char),一种布尔类型(boolean). byt ...

  7. TwenLite源码阅读

    概要: 这里使用的TweenLite版本是:V1.18.0. TweenLite核心有: EventDispatcher:用个as3的对这个应该不陌生,用来添加事件监听和抛出事件的.不过,js版是阉割 ...

  8. git:当本地分支中的代码和develop分支上有很多冲突,希望删掉本地分支,重新建立新的分支,怎么解决?

    git:当本地分支中的代码和develop分支上有很多冲突,希望删掉本地分支,重新建立新的分支,但是git中说你需要先解决当前的冲突,这种情况怎么解决 这种情况可以在代码编辑器中点击commit,然后 ...

  9. vue项目的架构设计完善详解

    vue项目构建vuex+mock层 vue项目添加jsBridge(与原生交互的) vue项目添加代码格式化

  10. jQuery首页更换背景皮肤

    昨天做了一个jQuery首页更换背景皮肤,感觉还是挺不错的,一共需要两个文件,一个是我们写的HTML文件,我们起名叫做index.html,一个是我们引入的jQuery文件,我们起名叫做jQuery. ...