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

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

我自己写了一个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. I2C_周立功标准驱动程序_c代码

    /****************************************Copyright (c)********************************************** ...

  2. 【ASP.NET MVC路由测试+性能调试工具】

    http://getglimpse.com https://github.com/Glimpse/Glimpse 百度网盘: http://pan.baidu.com/s/1jHuTtKa

  3. jdk8预览

    原文:http://www.techempower.com/blog/2013/03/26/everything-about-java-8/ 1.接口增强 (1)接口可以定义static方法 java ...

  4. C#中List<T>用法

    所属命名空间:System.Collections.Generic public classList<T> :IList<T>,ICollection<T>,IEn ...

  5. UVA_Cubic Eight-Puzzle UVA 1604

    Let's play a puzzle using eight cubes placed on a 3 x 3 board leaving one empty square.Faces of cube ...

  6. UVA 10129-Play on Words(欧拉通路）

    题意:给N个单词,判断是否单词首尾(前一个单词的尾字符与后一个单词的头字符相同)相连能否形成一条链. 解析:找欧拉通路(欧拉回路或是欧拉链路),但这题事先需要并查集一下,判断是否只属于一个集合,如aa ...

  7. 剑指offer-面试题2.实例Singleton模式

    题目:设计一个类,我们只能生成该类的一个实例 这道题显然是对设计模式的考察,很明显是单例模式.什么是单例模式呢,就是就像题目所说的只能生成一 个类的实例.那么我们不难考虑到下面几点: 1.不能new多 ...

  8. Android中调用C++函数的一个简单Demo

    这里我不想多解释什么,对于什么JNI和NDK的相关内容大家自己去百度或谷歌.我对Android的学习也只是个新手.废话少说直接进入正题. 一.在Eclipse中创建一个Android Applicat ...

  9. ObjectOutputStream 追加写入读取错误 - 自己的实现方案

    本篇博客灵感来自http://blog.csdn.net/chenssy/article/details/13170015 问题描述.问题出现的原因.尝试解决办法,请参见鄙人上一编博客. 上一编文章解 ...

  10. 【转】nand flash坏块管理OOB,BBT,ECC

    0.NAND的操作管理方式      NAND FLASH的管理方式:以三星FLASH为例,一片Nand flash为一个设备(device),1 (Device) = xxxx (Blocks),1 ...