全选练习
       ** 使用复选框上面一个属性判断是否选中
                   - 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. Yii2事务

    今天写到发券,发现没加事务,于是学习了下 事务: 是指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全地不执行. 事务处理可以确保除非事务性单元内的所有操作都成功完成,否则不会永久更新面 ...

  2. Python 素数判断；以及默尼森数

    1. 素数/质数 只能被2或者本身整除的正整数. 2. 默尼森数 P是素数且M也是素数,并且满足等式M=2^P-1,则称M为默尼森数. 编程小要求: 输出前5个默尼森数 1)最外层循环找素数 中间层循 ...

  3. 【windows】跑大型程序时不要休眠和睡眠

    win10系统. 为了节能,长时间没有操作操作系统会自动进入休眠模式. 先前设定了"控制面板\硬件和声音\电源选项\编辑计划设置",都设定为"从不",结果不起作 ...

  4. 【bzoj3675】 Apio2014—序列分割

    http://www.lydsy.com/JudgeOnline/problem.php?id=3675 (题目链接) 题意 给出一个包含n个非负整数的序列,要求将其分割成k+1个序列,每次分割可以获 ...

  5. 【poj1017】 Packets

    http://poj.org/problem?id=1017 (题目链接) 题意 一个工厂制造的产品形状都是长方体盒子,它们的高度都是 h,长和宽都相等,一共有六个型号,分别为1*1, 2*2, 3* ...

  6. dedecms /include/uploadsafe.inc.php SQL Injection Via Local Variable Overriding Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 . dedecms原生提供一个"本地变量注册"的模拟 ...

  7. QIBO CMS /inc/common.inc.php Local Variables Overriding Vul In $_FILES

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 齐博在/inc/common.inc.php使用$$_key=$value.ext ...

  8. hihocoder 1347 小h的树上的朋友

    传送门 时间限制:18000ms单点时限:2000ms内存限制:512MB 描述 小h拥有$n$位朋友.每位朋友拥有一个数值$V_i$代表他与小h的亲密度.亲密度有可能发生变化.岁月流逝,小h的朋友们 ...

  9. MVC设计模式与三层架构

    三层架构分别是:表示层(Web层).业务逻辑层(BLL层)和数据访问层(DAL层). (1)表示层负责: a.从用户端收集信息 b.将用户信息发送到业务服务层做处理 c.从业务服务层接收处理结果 d. ...

  10. [Android]Volley的使用

    Volley是Google I/O 2013上提出来的为Android提供简单快速网络访问的项目.Volley特别适合数据量不大但是通信频繁的场景. 优势 相比其他网络载入类库,Volley 的优势官 ...