<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. 对JavaScript莫名的愤怒

    很多时候,我都察觉JavaScript有一中描述性语言的特性,为了实现他的功能,在浏览器中完美的发挥作用,他就像是一个巨型的工厂工程模式,外挂了很多API和功能集,他们试图用完美的方案去解释所有必须的 ...

  2. java查询WFS服务

    在我们访问wfs服务时候,有时候会遇到前台访问时候的跨域问题.这里给出java访问的一个小例子. import java.io.BufferedReader; import java.io.IOExc ...

  3. linux命令之vim使用-（转）vim的保存文件和退出命令

    博客地址: http://blog.sina.com.cn/s/blog_5e357d2d0100zmth.html

  4. C#各版本特性

    C# 2.0 泛型,可空类型,匿名方法,更方便的委托,迭代器,分布类型,静态类,包含不同访问修饰符的属性的取值和赋值方法,命名空间别名,pragma指令,固定大小的缓冲器. C# 3.0 LINQ,自 ...

  5. CentOs7&zookeeper

    下载安装包 wget http://www.apache.dataguru.cn/zookeeper/stable/zookeeper-3.4.6.tar.gz 解压 tar xzvf zookeep ...

  6. Redis源码研究--字符串

    之前看的内容,占个位子,以后补上. ------------8月2日------------- 好久没看了,惭愧,今天抽了点时间重新看了Redis的字符串,一边写博客,一边看. Redis的字符串主要 ...

  7. Linux下通过shell脚本创建账户

    当我们在linux平台上开发一些项目时,或者有一些项目是需要部署到linux系统上时,有时候会涉及到linux上的特定的账户,例如有一些项目需要运行在某些特定的账户下,或者有时候需要在全新的环境上搭建 ...

  8. Beaglebone Back学习七（URAT串口测试）

    URAT串口测试

  9. WPF 中 TreeListView 的使用

    前段时间在项目开发中需要用 TreeListView 的功能,于是在网上狂搜一通,倒也找到了几个小例子,但还是满足不了我简单的要求,由于时间紧也只能折中凑合着用了.最近时间比较充裕,把其中的例子整理一 ...

  10. （转）Mac OS X内核编程,MAC驱动开发资源汇总

    一.Mac  OS  X内核编程开发官方文档: I/O Kit Fundamentals: I/O Kit基础 - Mac OS X系统内核编程 https://developer.apple.com ...