<!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. Maven学习总结（六）：pom.xml文件的说明

    什么是POM? POM是项目对象模型(Project Object Model)的简称,它是Maven项目中的文件,使用XML表示,名称叫做pom.xml.作用类似ant的build.xml文件,功能 ...

  2. jQuery和MVVM类框架的编程区别点

    本文说的mvvm框架以react为列,其他应该也是类似的: react实际上仅仅是帮助我们再View层简化,让我们仅仅需要专注数据,只要数据改变,所有的视图就会自己跟随着改变, 本人自己做react项 ...

  3. C#编写强大的SQL Server数据库自动备份服务

    数据库自动备份服务,带配置,还算可以吧 周末抽时间,编写了一个这样的工具,可以让,对数据库不了解或不熟悉的人,直接学会使用备份,省时省力,同样,我也将一份,通过脚本进行备份的,也奉献上来, 通过sql ...

  4. 【VS2012】F5不能自动编译新修改

    VS2012正常使用时,如果文件有修改,按F5运行时,会自动对修改的文件进行重新编译.今天遇到的情况却并没有.度娘了下,网上有相同的问题,解决办法是“工具->选项->项目和解决方案-> ...

  5. Linux / mysql: is it safe to copy mysql db files with cp command from one db to another?

    Copying is very simple for MyISAM and completely 100% risky (near suicidal) with InnoDB. From your q ...

  6. Monte Calro Tree Search (MCTS)

    https://blog.csdn.net/natsu1211/article/details/50986810, 感谢分享! Intro最近阿法狗和李师师的人机大战着实火了一把,还顺带捧红了柯杰,古 ...

  7. 【转】fatal error C1189: #error : missing -D__STDC_CONSTANT_MACROS / #define __STDC_CONSTANT_MACROS

    转自:http://blog.csdn.net/friendan/article/details/46576699 fatal error C1189: #error :  missing -D__S ...

  8. 我只是个搬运工,walle

    安装 改进本文 walle 瓦力 自动化1.简洁安装指南 git clone git@github.com:meolu/walle-web.gitcd walle-webvi config/web.p ...

  9. 关于asp.net MVC3 ----@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction

    1.带有Render的方法返回值是void,在方法内部进行输出:不带的返回值类型为MvcHtmlString,所以只能这样使用:@Html.Partial 对应 @{Html.RenderPartia ...

  10. linux 下 eclipse 开发环境的搭建

    在windows平台下开发习惯了各种ide,不得不承认ide给我们开发带来的便捷.于是希望在linux平台下也希望找到一个合适的ide.这就想起来了eclipse具有跨平台性. 那么就开始搭建环境吧. ...