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

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

我自己写了一个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. BZOJ 1065 奥运物流

    http://www.lydsy.com/JudgeOnline/problem.php?id=1065 思路:由于n个点,有n条边,因此由根就会引出一个环,我们枚举环的长度,在那个长度断开,我们假设 ...

  2. < IOS > 文件中 某个类设置ARC，或者非ARC

    用-fno-objc-arc标记来禁用在ARC工程那些不支持ARC的文件的ARC用-fobjc-arc标记启用非ARC工程中支持ARC的文件 项目targets -> build phases ...

  3. java实现xml-rpc客户端和服务端

    客户端代码: package test_xmlrpc.test; import java.net.URL;import java.util.ArrayList;import java.util.Lis ...

  4. Clone Graph 解答

    Question Clone an undirected graph. Each node in the graph contains a label and a list of its neighb ...

  5. 【UVA 11997 K Smallest Sums】优先级队列

    来自<训练指南>优先级队列的例题. 题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18702 题意:给定 ...

  6. 使用sae定时执行Python脚本

    使用sae定时执行Python脚本 使用sae定时执行Python脚本 12,May,2014 | 57 Views 毕设压力略大,必须是桂林游的锅.去之前放松了几天,回来又休闲了几天,加上桂林的一周 ...

  7. Maven引入hadoop依赖包出错解决办法

    错误: ArtifactTransferException: Failure to transfer org.apache.hadoop:hadoop-hdfs:jar:2.6.0 from http ...

  8. Android开发之Intent.Action

    1 Intent.ACTION_MAIN String: android.intent.action.MAIN 标识Activity为一个程序的開始.比較经常使用. Input:nothing Out ...

  9. 从Android Handler内部类到WeakReference的知识关联

    Handler: 普通使用方法: Handler用于处理和从队列MessageQueue中得到Message.一般我们要重写Handler的handleMessage(Message msg){}方法 ...

  10. python 笔记1--基础类型

    list 操作 append() 添加最外面 insert(pos,content) 插入指定地方 pop() 删除最外面 pop(pos) 删除指定地方 list中可以有list,且能用二维数组的方 ...