全选练习
       ** 使用复选框上面一个属性判断是否选中
                   - 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. bash中不可以用字符串做数组下标

    bash中可以用字符串做数组下标吗例如 test["abc"]=1------解决方案-------------------- 好像是误会,是awk里可以,bash shell里不 ...

  2. 2016 G面试题#2 不构造树的情况下验证先序遍历

    def isValidTree(POTra): """ POTra :param list: :return: """ if not POT ...

  3. BZOJ1407 [Noi2002]Savage

    Description Input 第1行为一个整数N(1<=N<=15),即野人的数目. 第2行到第N+1每行为三个整数Ci, Pi, Li表示每个野人所住的初始洞穴编号,每年走过的洞穴 ...

  4. Automated CMS category, version identification (CMS vulnerability detection)

    catalog . 引言 . 不同CMS版本标的文件路径调研 . Code Example 1. 引言 微软解决大量CVE补丁更新的检测时候,采取的思路不是根据MD5对单个漏洞文件(.dll..sys ...

  5. org.springframework.expression.spel.SpelEvaluationException: EL1005E:(pos 0): Type cannot be found

    今天在完成Spring项目的时候遇到了一个类似于下面的异常: 10.03.2010 13:53:53 org.apache.catalina.core.StandardWrapperValve inv ...

  6. 使用Guava来计算笛卡尔积

    以前做项目的时候计算笛卡尔积的时候,总是使用各种for循环来嵌套,最后往往在Sonar代码检查的时候总是会报警说for循环嵌套过深. 今天才知道Guava原来已经为我们提供了优雅的计算笛卡尔积的方法. ...

  7. POJ 2739 Sum of Consecutive Prime Numbers（尺取法）

    题目链接: 传送门 Sum of Consecutive Prime Numbers Time Limit: 1000MS     Memory Limit: 65536K Description S ...

  8. RNN 入门教程 Part 2 – 使用 numpy 和 theano 分别实现RNN模型

    转载 - Recurrent Neural Networks Tutorial, Part 2 – Implementing a RNN with Python, Numpy and Theano 本 ...

  9. response压缩响应

    思路:1.通过filter向目标页面传递一个自定义的response对象 2..在这个response对象中通过重写getOutputStream方法和getWriter方法使目标资源调用 该方法输出 ...

  10. js 递归下的循环

    的递归下的循环不能使用forEach  可以使用for代替 错误写法 // 获取完整名字 var getFullName = function(code, resultName) { if (code ...