我们处理数据时，最好能够支持全选操作。

选中之后，进行删除，或其他处理。

我自己写了一个demo。

主要功能：

1.点击全部选中

2.点击全部取消

3.然后进行获取选中的id，进行处理

代码如下：

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>

<script src="./js/jquery-1.4.2.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="./css/demo.css">

<script type="text/javascript">

    $(document).ready(function(){

        //单击全选

        $("#checkall").click(function(){

            if($(this).attr("checked")){

                $("input[name='mailid']").attr("checked", true);

            }else{

                $("input[name='mailid']").attr("checked", false);

            }

        });

        //删除

        $("#quick_del").click(function(){

            var arrMailid = new Array();

            $("input[name='mailid']").each(function(i){

                if($(this).attr("checked")){

                    arrMailid.push($(this).val());//添加到数组中

                }

            });

            strMailid = arrMailid.join("-");

            //alert(arrMailid instanceof Array);//判断是否为数组格式

            del(strMailid);

        });

    });

    //删除,只进行处理，不参与元素争端

    function del(mailid){

        //或者ajax处理

        //或者跳转处理

    }

</script>

</head>

<input type="checkbox" name="checkall" id="checkall" title="选中/取消选中"><br>

<input type="checkbox" name="mailid" value=""><br>

<input type="checkbox" name="mailid" value=""><br>

<input type="checkbox" name="mailid" value=""><br>

<input type="checkbox" name="mailid" value=""><br>

<input type="checkbox" name="mailid" value=""><br>

<a class="btn_gray btn_space" hidefocus="" id="setAllReaded" onclick="getTop();" href="javascript:;">全部标为已读</a>

<a class="btn_gray btn_space" hidefocus="" id="quick_del"  href="javascript:;" name="del">删除</a>

</html>

相关的css代码：

.btn_gray{

border: 1px solid #;

color: #;

color: #!important;

background: #F3F3F3;

background: -moz-linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);

background: -webkit-linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);

background: -o-linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);

background: -ms-linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d7d7d7',GradientType= );

background: linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);

}

.btn_space {

margin-right: 3px;

}

a:hover {

text-decoration: underline;

}

body {

font-family: "lucida Grande",Verdana;

font-size: 12px;

}

这里是把a标签处理成按钮的样式的写法。

全选demo的更多相关文章

  1. jquery 实现的全选demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  2. jQuery 全选和反选demo

    前段时间做了一个全选和反选的功能,最近不忙了,做了一个简化版的demo. 全部代码如下: <!DOCTYPE html> <html> <head> <tit ...

  3. JavaScript下全选反选的Demo程序里实现checkmeonly函数 DOM

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

  4. vue全选反选demo

    <template> <div> <div class="xuanze"> <label><input type=" ...

  5. 优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo

    提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...

  6. checkbox的全选与反选

    最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...

  7. Angular-ngtable联动全选

    之前于Angular第三方插件ngTable的官网demo上看到的例子,但苦于demo中联动全选为选中所有,项目中并不适用,因此做了下小小的修改,修改目的只是为实现其功能,方法不敢苟同,若有更加简便的 ...

  8. angularJS全选功能实现

    最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选. 实现效果: 1.点击全选checkbox可以切换全选和全部清空 2.点击列表中的checkbox,当全部选中时全选选中 3.在全 ...

  9. AngularJs 简单实现全选，多选操作

    很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作. Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现.) demo 演示地址 ...

随机推荐

  1. (?:pattern) (?=pattern) (?!pattern)

    (pattern) 匹配 pattern 并获取这一匹配.所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0- ...

  2. Linux系统维护修复模式

    基于PXE方式的Linux系统维护工具箱     在安装RedHat Linux系统的过程中,我们知道可以通过PXE方式进行安装,从而解决了无光驱或无安装介质(光盘)来安装操作系统.但是当系统由于某种 ...

  3. STL中，迭代器的分类

    五类迭代器如下: 1.输入迭代器:只读,一次传递    为输入迭代器预定义实现只有istream_iterator和istreambuf_iterator,用于从一个输入流istream中读取.一个输 ...

  4. 关于 MVC 字段 默认值

    以下是网友的疑问: ================================================================ Html.EditorFor(model=> ...

  5. Change the ball（找规律）

    Change the ball Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  6. 水池数目（DFS）

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地 ...

  7. 蚂蚁的难题(二)首尾相连数组的最大子数组和（DP）

    蚂蚁的难题(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种食材 ...

  8. android 更改USB显示名称

    能力 kernel\drivers\usb\gadget\Android.c 在这个例子中,下列的变化 #define PRODUCT_STRING "Sergeycao" 版权声 ...

  9. oracle常用查询三

    查询跟索引有关的数据字典时,可以用下面这条SQL语句: SQL>select * from dictionary where instr(comments,'index')>0; 如果我们 ...

  10. 【TFS】增加组员，以及用户权限分配

    一.创建windows用户. 二.TFS ->组成员资格->双击 项目集合管理员->添加创建的Windows用户(最高权限) 三.设置权限: TFS权限的复杂,其实也不是很复杂,它只 ...