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

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

我自己写了一个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. SQLServer优化资料整理（一）

    查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建计算列导致查询不优化. 4.内存不足 ...

  2. Keil C51 与 ARM 并存的方法

    很多朋友都在想,怎么让keil C51与ARM能够并存使用.有安装经验的朋友都知道,安好C51后再安ARm,C51不能正常工作:安好ARM后再安C51,ARM不能正常工作. 网上也有相关解决办法,不过 ...

  3. jQuery的入门与简介《思维导图》

    <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我知道了jQuery拥有强大的选择器, 出色的DOM操作 ...

  4. Linux下ld搜索问题：ld: cannot find -l"XX"

    ld命令行工具(链接库的一个工具)的搜索路径是-L指定的,库名是-l指定的. 比如: ld -L[dir] -l[mylib] --verbose 以上我用可视化的方法显示ld的搜索路径,其结果是居然 ...

  5. case then 的用法 貌似case then不支持别名

    set ANSI_NULLS ONset QUOTED_IDENTIFIER ONgo ALTER PROC [dbo].[usp_SRV_GetALLRelativeProject]@Service ...

  6. initial pointer [expert c]

    initial differece between pointer and array Both arrays and pointers can be initialized with a liter ...

  7. ubuntu Linux离线安装软件包

    ubuntu Linux离线安装软件包 http://www.myir-tech.com/bbs/thread-337-1-1.html(出处: 米尔科技论坛) 方法一 在可上网的ubuntu电脑上, ...

  8. Android Studio虚拟机配置虚拟键盘

    1. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2pjMjExMzIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkF ...

  9. AS3聊天单行输入框图文混排完美实现

    几年前刚毕业.第一个游戏模块做的就是聊天.到如今.几个游戏写过几次聊天模块. 之前在4399做的<幻龙骑士>(又名<神骑士>),还有上周六刚上线的<疯狂的子弹>, ...

  10. Qt 信号与槽

    Qt信号与槽的理解 信号和槽机制是 QT 的核心机制,要精通 QT 编程就必须对信号和槽有所了解.信号和槽是一种高级接口,应用于对象之间的通信,它是 QT 的核心特性,也是 QT 区别于其它工具包的重 ...