<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. 【转载】应广大群众的要求，今天开始连载《超容易的Linux系统管理入门书》一书

    学习Linux容易嘛?我说超容易,你肯定不信.那学习Linux最好的学习方法是什么,就是脑子里面一直提问题,不停的提,时时刻刻提,如果你没有问题,那再容易的学习书你也看不懂. <超容易的Linu ...

  2. java访问webservice服务（一）

    欢迎转载  http://www.cnblogs.com/shizhongtao/p/3433653.html 使用wsdl2java工具命令   一. 调出命令提示符cd到cxf的解压路径“D:\学 ...

  3. Poj OpenJudge 百练 1860 Currency Exchang

    1.Link: http://poj.org/problem?id=1860 http://bailian.openjudge.cn/practice/1860 2.Content: Currency ...

  4. how to Enable Client Integration

    i got a problem,the problem is list cant use export to excel button in sharepoint 2010. I found my a ...

  5. input中id和name属性的区别。

    input中id和name属性的区别. 做网站很久了,但到现在还没有搞明白input中name和id的区别,最近学习jquery,又遇到这个问题,就在网上搜集资料.看到这篇,就整理出来,以备后用. 可 ...

  6. 学习笔记--Quartz定时器

    文章同步发表在博主网站朗度云,传输门:http://www.wolfbe.com/detail/201608/338.html 1.Quartz定时器执行流程 Quartz需要定义执行任务.触发器,在 ...

  7. L003-oldboy-mysql-dba-lesson03

          L003-oldboy-mysql-dba-lesson03 IOPS:每秒钟输入输出的数量 [root@web01 ~]# cat /proc/meminfo [root@web01 ~ ...

  8. Mysql Java type mapping

    MySQL Type Java Type ---------- --------- CHAR String VARCHAR String LONGVARCHAR String NUMERIC java ...

  9. php5 图片验证码一例

    php5 图片验证码. GD库的函数1,imagecreatetruecolor -----创建一个真彩色的图像imagecreatetruecolor(int x_size,int y_size) ...

  10. VB6-操作数据库

    平常搞数据库操作多了就想把经常用的内容放在一起,我也懒,在一本书里的工程例子挑了一个bas,修修改改,凑合这用吧. Public strCnn As String '数据库连接字符串 Public A ...