<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. UIView-4-EventForViews(在view上加入button时候的事件处理)

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  2. 很牛逼的android真机调试，手机、平板、电视都可

    1.首先通过路由器,搭建局域网 2.手机开wifi,记住ip地址,平板开wifi,记住ip地址,电视开wifi,记住ip 3.然后再eclipse里面“窗口-首选项-android-ddms里面设置使 ...

  3. javascript的排序算法

    已经准备秋招一段时间了,因为这个关系也在各种巩固知识,顺便整理一下一些东西.这篇文章就是自己整理了一下各种JS的排序算法,以便自己以后回顾. 冒泡排序 function bubbleSort(arr) ...

  4. 3月3日(3) Binary Tree Preorder Traversal

    原题 Binary Tree Preorder Traversal 没什么好说的... 二叉树的前序遍历,当然如果我一样忘记了什么是前序遍历的..  啊啊.. 总之,前序.中序.后序,是按照根的位置来 ...

  5. MFC中快速应用OpenCV（转）

    转载链接:http://wiki.opencv.org.cn/index.php/MFC%E4%B8%AD%E5%BF%AB%E9%80%9F%E5%BA%94%E7%94%A8OpenCV 简介和缘 ...

  6. Web开发常见的漏洞

    SQL注入漏洞 跨站脚本攻击漏洞 登陆后台管理页面 IIS短文件/文件夹漏洞 系统敏感信息泄露

  7. clients（PV操作共享内核内存进行输入输出分屏） - server（进程间通信）模型实现

    1.拓扑结构 2.PV操作共享内核内存进行输入输出分屏 (1) int semop(int semid,struct sembuf *sops,size_t nsops): 功能描述 操作一个或一组信 ...

  8. showModalDialog 超过问题

    a.aspx页面打开一个弹出模式对话框b.aspx. a.aspx 页面页面代码: function SetPlay() { window.showModalDialog('SetAdvertisin ...

  9. Cocos2dx隐藏iOS7状态栏】通过添加Plist Key隐藏iOS7状态栏

    本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi)  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/%e9%9a% ...

  10. 在cmd命令行下登录本地oracle数据库与服务器上的oracle

    一.本地登录 cmd->sqlplus 用户名/密码@数据库名 (as sysdba)->enter注:如果此用户名不是系统用户sys,scott,system就不需要加as sysdba ...