全选练习
       ** 使用复选框上面一个属性判断是否选中
                   - 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. 纯代码自定义不等高cell

    数据模型.plist解析这里就不过多赘述. 错误思路之一: 通过在heightForRowAtIndexPath:方法中调用cellForRowAtIndexPath:拿到cell,再拿到cell的子 ...

  2. js-JavaScript高级程序设计学习笔记3

    第五章 引用类型 1.使用new操作符和Date构造函数创建日期对象. 2.创建特定日期有两个方法--Date.parse()和Date.UTC().后者小时数为0时显示时间是8点,应该是因为本地是东 ...

  3. jquery插件-表单验证插件-demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. text-indent无效解决方案

    text-indent是用来字符缩进的. 1.text-indent所在的元素是行内元素而非块级元素.比如用在span,a等行内元素上.解决方案:在行内元素加上display:block; 或者把目标 ...

  5. Tomcat访问日志详细配置

    在server.xml里的<host>标签下加上 <Valve className="org.apache.catalina.valves.AccessLogValve&q ...

  6. 数据结构算法C语言实现（七）--- 3.1栈的线性实现及应用举例

    一.简述 栈,LIFO.是操作受限的线性表,和线性表一样有两种存储表示方法.下面以顺序存储为例,实现. 二.ADT 暂无. 三.头文件 //3_1.h /** author:zhaoyu email: ...

  7. Guava集合-BiMap

    在本篇文章中我们将介绍Guava集合中的BiMap这个接口. com.google.common.collect Interface BiMap<K,V> BiMap接口的父接口是Map& ...

  8. CSS 公共样式分享

    global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一 ...

  9. HDU 1425 sort（堆排序/快排/最大堆/最小堆）

    传送门 Description 给你n个整数,请按从大到小的顺序输出其中前m大的数. Input 每组测试数据有两行,第一行有两个数n,m(0<n,m<1000000),第二行包含n个各不 ...

  10. Build to win！——获得小黄衫的感想

    UPDATE: 应栋哥要求,上传了无遮挡的正面照(我的内心其实是拒绝的!(ㄒoㄒ)) 一.前言&背景 从大一上C++课程开始,栋哥就开始安利他大三的软工实践课. 时间过得飞快,大学转眼就过去一 ...