所有的操作都将使用jquery进行。

主要是为了实现指定内容的批量/单独删除操作。

先看一下页面的设计。

实现操作的主要地方是:

首先实现单击“标题”旁的checkbox实现所有条目的选择。

要点:jquery选择器

PHP代码如下:

将checkbox命名为“checkall”和“checklist”。届时,点击“checkall”时候

会通过选择器,将所有“checklist”选中,再进行“删除”。

实现全选/取消功能:

 $("#checkAll").click(function(){
if(this.checked){
$("input[name='checklist']").each(function(){
this.checked=true;
});
}else{
$("input[name='checklist']").each(function(){
this.checked=false;
});
}
}
);

  实现获取已选择的checkbox内容(点击“删除”)

 $("#delSelected").click(function(){
vararrCheck=$("input[name='checklist']:checked");
vararrT=[];
$(arrCheck).each(function(){
arrT.push(this.id);
});
});

剩下的事情就是将获取到的信息通过ajax使用post发给指定action去处理了。

js实现checkbox的全选/取消的更多相关文章

  1. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  2. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  3. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  4. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...

  5. js实现checkbox的全选和全不选功能

    html代码: <form name="form1" method="post" action="manage.php?act=sub" ...

  6. asp.net中Repeater结合js实现checkbox的全选/全不选

    前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...

  7. 用JavaScript实现CheckBox的全选取消反选,及遮罩层中添加内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 所有选择全选被选择

    //点击全选button的事件操作 function selectAll(){ var allcheckBoxs=document.getElementsByName("iTo") ...

  9. js中checkbox的全选和反选的实现

    <head> <meta charset="utf-8"/> <script type="text/javascript"> ...

随机推荐

  1. IOS 从系统图库中获取 图片 并设置为头像

    总会遇到一些应用 要拍照 设置图片之类的的  总结一个方法备用  以后 会 继续拓展到 多图 @interface AddCustomerViewController : UIViewControll ...

  2. Cache的原理、设计及实现

    Cache的原理.设计及实现 前言 虽然CPU主频的提升会带动系统性能的改善,但系统性能的提高不仅仅取决于CPU,还与系统架构.指令结构.信息在各个部件之间的传送速度及存储部件的存取速度等因素有关,特 ...

  3. 【Android 界面效果22】Android的Tab与TabHost

    Tab与TabHost 这就是Tab,而盛放Tab的容器就是TabHost 如何实现?? 每一个Tab还对应了一个布局,这个就有点好玩了.一个Activity,对应了多个功能布局. ①新建一个Tab项 ...

  4. maven install与maven package 的区别

    mvn install 是将你打好的jar包安装到你的本地库中,一般没有设置过是在 用户目录下的 .m2\下面.mvn package 只是将你的代码打包到输出目录,一般的是 target下面.

  5. 用Shell实现俄罗斯方块代码(Tetris.sh)

    本代码来源于网络: 文件下载地址:http://files.cnblogs.com/files/DreamDrive/Tetris.sh #!/bin/bash # Tetris Game # 10. ...

  6. Java操作文件夹的工具类

    Java操作文件夹的工具类 import java.io.File; public class DeleteDirectory { /** * 删除单个文件 * @param fileName 要删除 ...

  7. 【Trie】模板(动态指针,静态数组)

    摘自hackbuteer1 Trie树,又称单词查找树或键树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计和排序大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计.它的 ...

  8. Oracle查询银行卡数、修改余额及验证登录

    建立Oracle表 create table T_BANKCARD ( card_id VARCHAR2(20) not null, user_id VARCHAR2(20) not null, us ...

  9. GitHub之上传文件

    github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开.对于一般人来说公共仓库就已经足够了,而且我们也没多少代码来管理,O(∩_∩)O ...

  10. wamp图标黄色的另一种可能原因

    学习php用的是wamp即windows+apache+mysql+php,但是当启动的时候,图标为黄色(正常应为绿色),开始以为是端口的问题,但是将端口改掉依旧如此,后来发现是机器装的sqlserv ...