<!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. js 中concat()和slice()方法介绍

    1.concat() concat() 方法用于连接两个或多个数组. 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. <script type="text/javascr ...

  2. drupal7 自定义登录&找回密码页面，注意事项

    1.登录页面的 $form['form_id'] 和 $form['form_build_id'],是这样输出的: <?php print drupal_render($form['form_i ...

  3. JQuery 更改属性 JQ对象循环 each 全选反选 三元运算

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

  4. react项目跨域问题

    在用知乎写demo的时候碰到了跨域问题 解决跨域如下: 跨域代理解决 "proxy":"https://news-at.zhihu.com",   请求的时候, ...

  5. latex 图形的放置

         Next: 16.3 清除未处理的浮动图形 Up: 16. 浮动图形环境 Previous: 16.1 创建浮动图形  16.2 图形的放置 图形(figure)环境有一个可选参数项允许用户 ...

  6. 用Java开发贪吃蛇游戏

    贪吃蛇游戏的设计步骤: Part 1: 设计游戏图纸 画出900*700的白色窗口 在窗口上添加画布 在画布上添加标题 在画布上添加黑色游戏区 Part 2: 放置静态的蛇:一个头.两个身体 加上开始 ...

  7. (Stanford CS224d) Deep Learning and NLP课程笔记（三）：GloVe与模型的评估

    本节课继续讲授word2vec模型的算法细节,并介绍了一种新的基于共现矩阵的词向量模型--GloVe模型.最后,本节课重点介绍了word2vec模型评估的两种方式. Skip-gram模型 上节课,我 ...

  8. 3 使用selenium模拟登录csdn

    之前通过F12开发者模式调试,获取网站后台服务器验证用户名和密码的URL之后,再构造post数据的方式会存在一个问题,就是对目标网站的验证机制不明确,构造post数据除了用户名和密码之外,还可能有更复 ...

  9. 个人总结-9-session的使用，十天免登陆

    昨天查看bootstrap,实现了登录和注册页面的重写. 今天准备加入session实现,十天免登陆等内容. 使用bootstrap直接套用标签页,以实现.

  10. 如何写一个能在gulp build pipe中任意更改src内容的函数

    gulp在前端自动化构建中非常好用,有非常丰富的可以直接拿来使用的plugin,完成我们日常构建工作. 但是万事没有十全十美能够完全满足自己的需求,这时我们就要自己动手写一个小的函数,用于在gulp ...