全选练习
       ** 使用复选框上面一个属性判断是否选中
                   - 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. python求职之路

    自我介绍 这是一道送分题,万年不变的第一个问题.不过有些小伙伴可能没有太在意,其实这个问题已经在面试官心中决定了你的去留意向.自我介绍的主要结构:个人基本信息 + 基本技术构成 + 项目经验(具体项目 ...

  2. Web前端性能优化教程01：减少Http请求

    性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求 ...

  3. JSP导入EXCEL样式

    http://demo.gcpowertools.com.cn/spreadjs/exceliosample/exceliosample/ Java实现导入Excel: 1.做一个jsp页面,页面包括 ...

  4. bzoj4264: 小C找朋友

    hash大法好 #include <iostream> #include <cstdio> #include <cstring> #include <cmat ...

  5. [bzoj3694]最短路

    Description 给出一个$n$个点$m$条边的无向图,$n$个点的编号从$1-n$,定义源点为$1$. 定义最短路树如下:从源点$1$经过边集$T$到任意一点$i$有且仅有一条路径,且这条路径 ...

  6. VisualSVN Server搭建VDFS分布式仓研究（未成功）

    FSFS与VDFS的使用区别在于FSFS是本地仓库,VDFS是分布式仓库,实现在同一个局域网内多台仓库进行同步:以下是我的猜测,因为没搭建成功: 1.必须是同一个局域网,如果有外内网基本是不可实现,需 ...

  7. 虚拟机软件bochs编译使用问题

    bochs是一款具有调试功能的虚拟机软件,由C++编写,可用于调试操作系统.从ubuntu软件源中下载的很可能没有调试功能,需要先下载源码,可能比编译之后的可执行文件大的多. 编译时有很多选项,可以通 ...

  8. 加州大学伯克利分校Stat2.3x Inference 统计推断学习笔记: Section 4 Dependent Samples

    Stat2.3x Inference(统计推断)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...

  9. hdu 2036 - 改革春风吹满地(计算几何)

    题意:求解多边形面积 解法: 先了解数学上"叉积"的含义与性质: 三角形ΔABC的面积为: 我们可以依次计算每个三角形的面积,ΔABC,ΔACE,ΔEF - - 所有三角形的面积之 ...

  10. hdu 2005 - 第几天？

    题意:判断是否为闰年 解法:这题需要注意一下用scanf能直接读入year,month,day 附上代码: 1: #include<stdlib.h> 2: #include<str ...