<!DOCTYPE html>

<html>

    <head>

        <META charset="utf-8"/>

        <link rel="stylesheet" href="table.css"/>

        <style>

        </style>

    </head>

    <body>

        爱好：<br/>

        读书：<input type="checkbox" name="hobby" value="0"/><br/>

        游泳：<input type="checkbox" name="hobby" value="1"/><br/>

        听歌：<input type="checkbox" name="hobby" value="2"/><br/>

        <hr/>

        <button value="1" onclick="setAll()">全选</button>

        <button value="0" onclick="setNo()">全不选</button>

        <button value="-1" onclick="setOthers()" >反选</button>

    </body>

    <script src="util.js"></script>

    <script>

    /*

        //全选函数

        function setAll() {

            var hobbies = document.getElementsByName("hobby");

            for (var i = 0; i < hobbies.length; i++) {

                hobbies[i].checked = true;

            }

        }

        //全不选函数

        function setNo() {

            var hobbies = document.getElementsByName("hobby");

            for (var i = 0; i < hobbies.length; i++) {

                hobbies[i].checked = false;

            }

        }

        //反选

        function setOthers() {

            var hobbies = document.getElementsByName("hobby");

            for (var i = 0; i < hobbies.length; i++) {

                if (hobbies[i].checked == false)

                    hobbies[i].checked = true;

                else

                    hobbies[i].checked = false;

            }

        }

    */

        var inputs=$('input[name=hobby]');

        var btns=$('button');

        for(var i=0;i<btns.length;i++){

            btns[i].onclick=function(){

                var value=this.getAttribute('value');

                for(var i=0;i<inputs.length;i++){

                    if(value==1){

                        inputs[i].checked=true;

                    }else if(value==0){

                        inputs[i].checked=false;

                    }else{

                        inputs[i].checked=false;

                    }

                }

            }

        }

    </script>

</html>

util.js

function $(n){

    if(/^<([a-zA-Z]+)>$/.test(n)){

    var tagName = RegExp.$1;

    return document.createElement(tagName);

    }else{

        return document.querySelectorAll(n);

    }

}

js实现全选、全不选、反选的功能的更多相关文章

  1. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. JS实现全选、不选、反选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  3. js实现全选/全不选、反选

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. 用 JS（JavaScript ）实现多选、全选、反选

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现全选.反选.多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  6. js(四) 全选/全不选和反选

    思路:通过选择全选的选框的状态stuts 即true/false控制其他选框. 首先 我们要通过.checked方法获取选框(全选/全不选)的值. function all(){ var stuts= ...

  7. jquery 全选 全不选 反选

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...

  8. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  9. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  10. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

随机推荐

  1. 【转载记录】Accessing Device Drivers from C#

    来源:http://www.drdobbs.com/cpp/accessing-device-drivers-from-c/184416423/   Device Drivers are writte ...

  2. MAVLink Linux/QNX/MacOs Integration Tutorial (UDP)

    MAVLink Linux/QNX/MacOs Integration Tutorial (UDP) Overview This program was written to test the udp ...

  3. 【转】c++ http下载文件

    #include <afx.h> #include <afxinet.h> #define RECVPACK_SIZE 2048 bool DownloadSaveFiles( ...

  4. Android知识点滴

    今天,把新作的布局状态魅族机上进行测试 发现了一个BUG,造成闪退. 看了下log,一个布局造成的. 开始分析这个布局造成这个问题的原因. 开始艰难的调试过程. 代码注释大法,发现这个问题是一个tex ...

  5. 有关从经典部署模型迁移到 Azure Resource Manager 部署模型的常见问题

    此迁移计划是否影响 Azure 虚拟机上运行的任何现有服务或应用程序? 不可以. VM(经典)是公开上市的完全受支持的服务. 你可以继续使用这些资源来拓展你在 Azure 上的足迹. 如果我近期不打算 ...

  6. Win10系统创建关机快捷方式和快捷键的方法,实现一键关机

    想不想关机变得更加简单?在Win10中总有些朋友想要快速的操作体验,所以关机这个经常使用的功能也被设置的更简单,下面小编要分享的是“Win10系统创建关机快捷方式和快捷键的方法”. 1.在win10下 ...

  7. Linux 下Shell的学习3-优秀demo

    优秀的DEMO cat /etc/init.d/functions   -->里面有颜色定义cat /etc/rc.d/rc.sysinit cat /etc/init.d/nfscat /et ...

  8. 4 Dockerfile指令详解 && COPY 指令

    COPY 指令将从构建上下文目录中 <源路径> 的文件/目录复制到新的一层的镜像内的 <目标路径> 位置.比如: COPY package.json /usr/src/app/ ...

  9. 使用信号进行同步 sem_post

    使用信号进行同步 信号是 E. W. Dijkstra 在二十世纪六十年代末设计的一种编程架构.Dijkstra 的模型与铁路操作有关:假设某段铁路是单线的,因此一次只允许一列火车通过. 信号将用于同 ...

  10. Genymotion安卓模拟器和VirtualBox虚拟机安装、配置、测试（win7_64bit）

    1.概述 VirtualBox是一个优秀的虚拟机软件,它可以在电脑上提供另一个操作系统的运行环境,使多个系统同时运行.VirtualBox支持的操作系统包括Windows.Mac OS X.Linux ...