全选练习
       ** 使用复选框上面一个属性判断是否选中
                   - checked属性
                   - checked=true：选中
                   - checked=false：不选中

* 创建一个页面
                  ** 复选框和按钮
                        - 四个复选框表示爱好
                        - 还有一个复选框操作 全选和选不选，也有一个事件

** 三个按钮，分别有事件
                       - 全选
                       - 全不选
                       - 反选
          * 全选操作

</head>

 <body>

    <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选

    <br/>

    <input type="checkbox" name="love"/>篮球

    <input type="checkbox" name="love"/>排球

    <input type="checkbox" name="love"/>羽毛球

    <input type="checkbox" name="love"/>乒乓球

    <br/>

    <input type="button" value="全选" onclick="selAll();"/>

    <input type="button" value="全不选" onclick="selNo();"/>

    <input type="button" value="反选" onclick="selOther();"/>

    <script type="text/javascript">

        //实现全选和全不选

        function selAllNo() {

            /*

                1、得到上面那个复选框

                    - 通过id获取到

                2、判断这个复选框是否是选中

                    - if条件，checked==true

                3、如果是选中，下面是全选

                4、如果不是选中，下面是全不选

            */

            //得到上面复选框

            var box1 = document.getElementById("boxid");

            //判断这个复选框是否是选择

            if(box1.checked == true) { //是选择状态

                //调用全选方法

                selAll();

            } else { //不是选中状态

                //调用全不选方法

                selNo();

            }

        }

        //实现反选的操作

        function selOther() {

            /*

                1、获取到要操作的复选框

                2、返回数组，遍历数组

                3、得到每一个复选框

                4、判断当前的复选框是选中还是不选中

                    - if(love1.checked == true) {}

                5、如果选中，属性checked设置成false，否则，设置成true

            */

            //获取要操作的复选框

            var loves11 = document.getElementsByName("love");

            //遍历数组

            for(var a=0;a<loves11.length;a++) {

                //得到每一个复选框

                var love11 = loves11[a];

                //判断当前这个复选框是什么状态

                if(love11.checked == true) { //是选中的状态

                    //设置checked=false

                    love11.checked = false;

                } else { //是不选中的状态

                    //把checked=true

                    love11.checked = true;

                }

            }

        }

        //实现全不选的操作

        function selNo() {

            /*

                1、获取到要操作的复选框

                2、返回的是数组，遍历数组

                3、得到每一个复选框

                4、设置复选框的属性 checked=false

            */

            //得到要操作的复选框

            var loves1 = document.getElementsByName("love");

            //遍历数组

            for(var j=0;j<loves1.length;j++) {

                //得到每一个复选框

                var love1 = loves1[j];

                //设置属性的值checked = false;

                love1.checked = false;

            }

        }

        //实现全选的操作

        function selAll() {

            /*

                1、获取要操作的复选框

                    - 使用getElementsByName()

                2、返回是数组，

                    - 属性 checked判断复选框是否选中

                        *** checked = true; //表示选中

                        *** checked = false;//表示不选中

                    - 遍历数组，得到的是每一个checkbox

                        * 把每一个checkbox属性checked=true

            */

            //获取要操作的复选框

            var loves = document.getElementsByName("love");

            //遍历数组，得到每一个复选框

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

                var love1 = loves[i]; //得到每一个复选框

                //设置属性是true

                love1.checked = true;

            }

        }

    </script>

 </body>

全选，全不选，反选的js实现的更多相关文章

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

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

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

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

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

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

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

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

  5. jquery 全选 全不选 反选

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

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

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

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

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

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

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

  9. 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]

    全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. git初体验（六）git配置

    一.基本配置 看这篇Git 基本配置其实就解决很多问题了. 二.客户端配置 1.git bash 粘贴与编辑 在git bash客户端头部右键,现在属性,然后把"快速编辑模式勾选即可&quo ...

  2. Hadoop实战第一篇

    前言:  都说现在是草根为尊的时代,近年来hadoop及spark技术在国内越来越流行.而且渐渐现成为企业的新宠.在DT时代全面来临之前,能提早接触大数据的技术必然能先人一步.本文作为Hadoop系列 ...

  3. matplotlib 和 pandas 两个包的安装

    matplotlib是强大的python 绘图包.pandas 是强大的python分析工具包.numpy是强大的python统计包. 都超级好用,而且最近开始动手实践机器学习算法了.特此备注一下安装 ...

  4. hdu 1757 矩阵

    用矩阵表示状态,矩阵乘法的就是状态之间的变换 作一个vector: 要求的就是一个矩阵A,使得上面那个vector乘以A之后变成 解得A= [不知道用逆矩阵能不能直接求出A Ref:http://bl ...

  5. Bzoj3004 吊灯

    Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 72  Solved: 46 Description        Alice家里有一盏很大的吊灯.所 ...

  6. Sql Server日期查询-SQL查询今天、昨天、7天内、30天

    今天的所有数据: 昨天的所有数据: 7天内的所有数据: 30天内的所有数据: 本月的所有数据: 本年的所有数据: 查询今天是今年的第几天: select datepart(dayofyear,getD ...

  7. 海边直播目标2017全国初中数学竞赛班课堂测试题解答-The Final

    1. 设函数 $f(x) = 2^x(ax^2 + bx + c)$ 满足等式 $f(x+1) - f(x) = 2^x\cdot x^2$, 求 $f(1)$. 解答: 由 $f(x) = 2^x( ...

  8. Linux之：Ubuntu速学笔记（2）

    撰写日期:2016-7-3 18:20:39 基本内容包括:Flash player安装.编译安装PHP.写个简单的PHP程序:Java程序(Java需要使用“javac”命令编译一下才能执行) 一. ...

  9. zabbix监控系列（4）之zabbix报警邮件无法发送

    情况介绍 首先确保邮箱规则没有把报警邮件作为垃圾邮件拉黑了. 服务器断电重启后,发现zabbix报警邮件无法发送,断电之前是好好的,但是重启后不行了,于是查看maillog日志,发现这个错误: Hos ...

  10. http+mysql结合keepalived做热备

    preface 公司要求http+mysql+redis+二次开发的ldap要求做高可用,所以此处写写keepalived在这种 环境下的高可用.keepalived这个软件我就不啰嗦了,众所周知,基 ...