<html>

<head>

    <title>全选或反选(dom)</title>

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

    <script>

        var divCheckbox;

        function init(){

            var allCheckbox = document.getElementById("allId");

            allCheckbox.onclick = allOnClick;

            var reservseCheckbox = document.getElementById("reservseId");

            reservseCheckbox.onclick = reservseOnClick;

            divCheckbox = document.getElementById("divId").getElementsByTagName("input");

        }

        function allOnClick(){

            for(var i = 0,len = divCheckbox.length;i < len;i ++){

                divCheckbox[i].checked = this.checked;

            }

        }

        function reservseOnClick(){

            for(var i = 0,len = divCheckbox.length;i < len;i ++){

                divCheckbox[i].checked = !divCheckbox[i].checked;

            }

        }

        window.onload =init;

    </script>

</head>

    <body>

        <input id="allId" type="checkbox" />全选

        <input id="reservseId" type="checkbox" />反选

        <div id="divId">

            <input type="checkbox" />足球

            <input type="checkbox" />乒乓球

            <input type="checkbox" />羽毛球

            <input type="checkbox" />网球

            <input type="checkbox" />棒球

            <input type="checkbox" />篮球

            <input type="checkbox" />全选

        </div>

    </body>

</html>
<html>

<head>

    <title>全选或反选(jQuery)</title>

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

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    <script>

        $(function(){

            var $divCheckbox = $('#divId > input');

            var $allCheckbox = $('#allId');

            $allCheckbox.click(function(){

                //这里不要使用attr，因为jQuery在1.6之后attr就某些时候不能够工作了。

                //若使用attr，则在第一次可以看见效果，之后都无效！

                $divCheckbox.prop("checked",this.checked);

            });

            var $reservseCheckbox = $('#reservseId');

            $reservseCheckbox.click(function(){

                $divCheckbox.each(function(index,element){

                    element.checked = !element.checked;

                });

            });

        });

    </script>

</head>

    <body>

        <input id="allId" type="checkbox" />全选

        <input id="reservseId" type="checkbox" />反选

        <div id="divId">

            <input type="checkbox" />足球

            <input type="checkbox" />乒乓球

            <input type="checkbox" />羽毛球

            <input type="checkbox" />网球

            <input type="checkbox" />棒球

            <input type="checkbox" />篮球

            <input type="checkbox" />全选

        </div>

    </body>

</html>

全选与反选（dom与jquery比较）的更多相关文章

  1. Jquery 全选、反选问题解析

    最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...

  2. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

  3. jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  4. checkbox全选，反选，取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  5. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...

  6. jquery一个按钮全选和反选

    1.jquery实现复选框全选和反选的方式有好几种,今天遇到一个问题,只用下边的方式生效:function checkAll(){ var check=$('#check_all').is(':che ...

  7. jquery实现全选、反选、不选

    <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...

  8. jQuery全选与反选，且解决点击只执行一次的问题

    <html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript ...

  9. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

随机推荐

  1. PHP学习笔记 - 进阶篇（5）

    PHP学习笔记 - 进阶篇(5) 正则表达式 什么叫正则表达式 正则表达式是对字符串进行操作的一种逻辑公式,就是用一些特定的字符组合成一个规则字符串,称之为正则匹配模式. $p = '/apple/' ...

  2. 一些值得思考的"小题"一

    如下是我们查找数组中某个元素的一种通常做法 const int *Find(const int *array, int length, int x) { const int *p = array; ; ...

  3. Java多线程(六) 线程系列总结

    多线程系列终于终结得差不多,本人对该系列所做的总结大致如下: 线程锁模块耗费了大量的时间,底层的AQS实现比较复杂.仍然没有时间总结源码部分,能够坚持写下这么几个篇幅的内容真心佩服自己....希望继续 ...

  4. 使用MySQL数据库将汉字转换成拼音的一个C语言小程序

    环境: mysql:mysql-5.1.65 centos:centos 6.5 编译命令: gcc -o chinesetopinyin chinesetopinyin.c -L/usr/lib/m ...

  5. 2014-10 u-boot 顶层config.mk分析

    /** ****************************************************************************** * @author    Maox ...

  6. Linux C 程序 预处理，结构体(13)

    C语言预处理,结构体 C语言预处理命令1.宏定义 1.无参数宏 #define 标识符 字符串 #代表本行是编译预处理命名 习惯上,宏定义大写 代替一个字符串,介绍重复书写某个字符串的工作量 有意义的 ...

  7. 不加好友实现QQ在线代码状态临时会话

    网友在介绍怎么样使用QQ来强制聊天,才想到以前一直遇到的QQ在线生成代码后,遇到的必须添加好友才能聊天的一个疑问. 公告:“QQ在线状态”V2.0正式发布,解决了QQ2009用户点击“在线状态”后须添 ...

  8. POJ 2516 最小费用最大流

    每一种货物都是独立的,分成k次最小费用最大流即可! 1: /** 2: 因为e ==0 所以 pe[v] pe[v]^1 是两条相对应的边 3: E[pe[v]].c -= aug; E[pe[v]^ ...

  9. 【BZOJ 1491】 [NOI2007]社交网络

    Description Input Output 输出文件包括n 行,每行一个实数,精确到小数点后3 位.第i 行的实数表 示结点i 在社交网络中的重要程度. Sample Input 4 4 1 2 ...

  10. apache本地和局域网访问设置

    apache本地和局域网访问设置 最近做项目需要同事ajax发项目给我,因为是测试环境,所以需要能访问我的服务器.我服务器直接用的wampserver.因为没有接触过,所以百度了一下,都是没有成功,后 ...