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

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

我自己写了一个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. js加载优化

    阻塞特性:       JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 脚本位置:       浏览器在碰到一个引入外部JS 文件的 ...

  2. CSS开发经验

    1.尽量用class来定义样式.尽量少使用  .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会造成干扰,应该给 ...

  3. toolkit，phonetextbox中实现用户按回车键会换行

    今天,了解到一个需求,要在输入框中实现:用户按回车键后换行 输入框是toolkit中的phonetextbox 1.首先google了一下,了解到有MultiLine这个属性,但是找寻了一番之后,居然 ...

  4. codecomb 2092【课程选择】

    题目描述 大学选课总是烦恼着很多人.现在X同学选出了很多备选课,但是有的课程之间是有时间冲突的.X不会分身,自然无法在同一个时间上不同的课.每个课可能有很多备选时间,但是每个课只需要选一个时间上就可以 ...

  5. Wap touch flispan demo

    直接上代码了 仔细看看例子就会明白 简单实用 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8& ...

  6. WebBot - Build Web Apps as Easily as Native Ones - Home

    Python-based Template Packages Python-based Template Packages WebBot - Build Web Apps as Easily as N ...

  7. C++类静态成员变量和const常量的初始化方法

    C++类静态成员变量和const常量在定义类的时候就必须初始化,否则都会编译出错. 而具初始化方法为: C++类静态成员变量初始化方法 #include <iostream> #inclu ...

  8. poj1426 Find The Multiple

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14622   Accepted: 593 ...

  9. Java核心技术，让计算机"一芯多用"的多线程技术

    我们在使用计算的时候会感受到计算机好像在同时执行很多任务,这也是我最初接触计算机给我留下的印象,而我们普通人在同一时刻大脑只能思考一件事情(当然不排除一些异能者能够做到一心二用),而且我们在思考完一件 ...

  10. live555从RTSP服务器读取数据到使用接收到的数据流程分析

    本文在linux环境下编译live555工程,并用cgdb调试工具对live555工程中的testProgs目录下的openRTSP的执行过程进行了跟踪分析,直到将从socket端读取视频数据并保存为 ...