<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. 基于AspectJ自定义注解

    package com.aspectj.demo.aspect; import java.lang.annotation.ElementType; import java.lang.annotatio ...

  2. java内部类的定义原则

    /*内部类的访问规则:1,内部类可以直接访问外部类中的成员,包括私有.    之所以可以直接访问外部类中的成员,是因为内部类中持有了一个外部类的引用,格式 外部类名.this2,外部类要访问内部类,必 ...

  3. spring事务到底用于service层还是dao层

    Spring事务为业务逻辑进行事务管理,保证业务逻辑上数据的原子性. 事务得根据项目性质来细分:事务可以设置到三个层面(dao层.service层和web层). 第一:web层事务,这一般是针对那些安 ...

  4. 取消定时-CICS

    CICE CA R 做定时的时候最好加上REqID

  5. Oracle 常用命令

    一 管理用户 查询用户集合 select username from dba_users; A 查询某个用户是否存在 select username from dba_users where user ...

  6. MySQL忘记密码后重置密码（Mac ）

    安装好MySQL以后,系统给了个默认的的密码,然后说如果忘记了默认的密码......我复制了默认密码就走过了这一步,这一步就是我漫长旅程的开始.他给的密码太复杂了,当然我得换一个,而且我还要假装我不记 ...

  7. 按照自己的理解实现比特交换协议(alternating-bit protocol)

    一开始的思路是想写两个程序的,发送端和接收端.但是后来想了下,因为是模拟的,所以不用这么麻烦,直接自己定制场景(比如说丢包阿,包出错阿,超时之类的). 基本上是根据上图所写的,一个函数发包,一个函数接 ...

  8. Traveller项目介绍

    Traveller,翻译为旅行家,是我用来实践最佳web技术的项目,主题是一个给旅行爱好者提供旅行信息的网站. 目标是组合现最流行的web技术,实现符合中国用户使用习惯的网站. 相关网址 Git:ht ...

  9. linux的SVN搭建与同步

    以下的配置文件,开头都不能有空格 安装: yum install subversion 验证:svnserve --version 代码库创建:(类似,可以建立多个仓库)[repo]mkdir -p ...

  10. 【Winform】 Enum逆向解析

    将字符串转换成Enum类型 Enum.Parse:将一个或多个枚举常数的名称或数字值的字符串表示转换成等效的枚举对象.   名称 说明   Parse(Type, String) 将一个或多个枚举常数 ...