<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>全选练习</title>

<script type="text/javascript">

    window.onload = function(){

        //获取四个多选框items

        var items = document.getElementsByName("items");

        //获取全选/全不选的多选框

        var checkedAllBox = document.getElementById("checkedAllBox");

        /*

         * 全选按钮

         *     - 点击按钮以后，四个多选框全都被选中

         */

        //1.#checkedAllBtn

        //为id为checkedAllBtn的按钮绑定一个单击响应函数

        var checkedAllBtn = document.getElementById("checkedAllBtn");

        checkedAllBtn.onclick = function(){

            //遍历items

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

                //通过多选框的checked属性可以来获取或设置多选框的选中状态

                //alert(items[i].checked);

                //设置四个多选框变成选中状态

                items[i].checked = true;

            }

            //将全选/全不选设置为选中

            checkedAllBox.checked = true;

        };

        /*

         * 全不选按钮

         *     - 点击按钮以后，四个多选框都变成没选中的状态

         */

        //2.#checkedNoBtn

        //为id为checkedNoBtn的按钮绑定一个单击响应函数

        var checkedNoBtn = document.getElementById("checkedNoBtn");

        checkedNoBtn.onclick = function(){

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

                //将四个多选框设置为没选中的状态

                items[i].checked = false;

            }

            //将全选/全不选设置为不选中

            checkedAllBox.checked = false;

        };

        /*

         * 反选按钮

         *     - 点击按钮以后，选中的变成没选中，没选中的变成选中

         */

        //3.#checkedRevBtn

        var checkedRevBtn = document.getElementById("checkedRevBtn");

        checkedRevBtn.onclick = function(){

            //将checkedAllBox设置为选中状态

            checkedAllBox.checked = true;

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

                //判断多选框状态

                /*if(items[i].checked){

                    //证明多选框已选中，则设置为没选中状态

                    items[i].checked = false;

                }else{

                    //证明多选框没选中，则设置为选中状态

                    items[i].checked = true;

                }*/

                items[i].checked = !items[i].checked;

                //判断四个多选框是否全选

                //只要有一个没选中则就不是全选

                if(!items[i].checked){

                    //一旦进入判断，则证明不是全选状态

                    //将checkedAllBox设置为没选中状态

                    checkedAllBox.checked = false;

                }

            }

            //在反选时也需要判断四个多选框是否全都选中

        };

        /*

         * 提交按钮：

         *     - 点击按钮以后，将所有选中的多选框的value属性值弹出

         */

        //4.#sendBtn

        //为sendBtn绑定单击响应函数

        var sendBtn = document.getElementById("sendBtn");

        sendBtn.onclick = function(){

            //遍历items

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

                //判断多选框是否选中

                if(items[i].checked){

                    alert(items[i].value);

                }

            }

        };

        //5.#checkedAllBox

        /*

         * 全选/全不选 多选框

         *     - 当它选中时，其余的也选中，当它取消时其余的也取消

         *

         * 在事件的响应函数中，响应函数是给谁绑定的this就是谁

         */

        //为checkedAllBox绑定单击响应函数

        checkedAllBox.onclick = function(){

            //alert(this === checkedAllBox);

            //设置多选框的选中状态

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

                items[i].checked = this.checked;

            }

        };

        //6.items

        /*

         * 如果四个多选框全都选中，则checkedAllBox也应该选中

         * 如果四个多选框没都选中，则checkedAllBox也不应该选中

         */

        //为四个多选框分别绑定点击响应函数

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

            items[i].onclick = function(){

                //将checkedAllBox设置为选中状态

                checkedAllBox.checked = true;

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

                    //判断四个多选框是否全选

                    //只要有一个没选中则就不是全选

                    if(!items[j].checked){

                        //一旦进入判断，则证明不是全选状态

                        //将checkedAllBox设置为没选中状态

                        checkedAllBox.checked = false;

                        //一旦进入判断，则已经得出结果，不用再继续执行循环

                        break;

                    }

                }

            };

        }

    };

</script>

</head>

<body>

    <form method="post" action="">

        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 

        <br />

        <input type="checkbox" name="items" value="足球" />足球

        <input type="checkbox" name="items" value="篮球" />篮球

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

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

        <br />

        <input type="button" id="checkedAllBtn" value="全　选" />

        <input type="button" id="checkedNoBtn" value="全不选" />

        <input type="button" id="checkedRevBtn" value="反　选" />

        <input type="button" id="sendBtn" value="提　交" />

    </form>

</body>

</html>

JS全选按钮练习的更多相关文章

  1. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  2. checkbox做全选按钮

    1.先写一个html页面,里面写一个全选按钮和几个复选框,实现下面2个要求 (1)点击全选按钮选中时,所有的复选框选中. (2)点击全选按钮取消选中时,所有复选框取消选中. <input typ ...

  3. 列表中checked全选按钮的实现

    用过音乐播放器的人都知道有个全选按钮,如果使用Jquery实现,有个直接选中checked标签的方式 <!DOCTYPE HTML> <html> <head> & ...

  4. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  5. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  6. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  7. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  8. Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

随机推荐

  1. Educational Codeforces Round 32 E 二分

    题意:从数组中选几个(任意),使他们的和modm的值最大 题解:我一开始是直接暴力写,然后就会t 其实这题可以用二分的方法写,一半数组的值用来遍历,一般数组的值用来查询. 二分查询就能把时间继续缩短 ...

  2. Foxmail for windows 客户端设置和 IMAP、POP3/SMTP 的设置

    Foxmail支持微信扫码.手机验证码.账号密码三种方式新建腾讯企业邮箱. 注意:目前仅foxmail 7.2.11版本支持微信扫码和手机验证码新建腾讯企业邮箱,可以foxmail官网https:// ...

  3. 3.Python运算符详解

    1.算数运算符 符号:+   -   *   /   %(取余.取模)   //(取整)   **(开方) 2.比较运算符 符号:>   >=   <   <=   ==(全等 ...

  4. Excel开启宏以后保存是会提示安全警告，怎么取消

    如果你用的(应该)是2007以上版本的话 请点左上角的EXCEL图标,EXCEL选项,信任中心,信任中心设置,个人信息选项,保存时从文件属性中删除个人信息前面的对号取消.确定就可以了. (补充:如果你 ...

  5. 工作中遇到的js跨域问题总结

    起因:之前在做一个项目的时候有这样一个问题,127.0.0.1域名上的一个页面A.html,需要访问127.0.0.2域名上B.html页面中的一个方法.这就涉及到JS跨域访问了,通过查阅资料,得以解 ...

  6. 【MVC】Scripts.Render的用法

    一.配置BundleConfig.cs文件 1.首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件2.BundleConfig就是一个微软新加的 一个打包 ...

  7. Jenkins 插件安装问题

    插件安装问题 尝试修改更新站点为可用的镜像站点 打开 Jenkins > Manage Jenkins > Manage Plugins > Advanced,将 Update Si ...

  8. 数据库 left()、length()函数

    数据库 left().length()函数 1.Mysql的length()函数: length()函数主要用于计算字符串的长度,用法也很简单:length(要计算的字符串) 就可以计算出字符串的长度 ...

  9. [USACO19OPEN]Valleys P

    题意 洛谷 做法 用并查集维护区域,剩下的就只用判是否有洞就好了 然后手玩出一个结论:凸角为\(+1\),凹角为\(-1\),和为\(sum\),洞数\(h\),满足\(sum=4-4h\) 位置\( ...

  10. c# 使用T4模板生成实体类（sqlserver）

    新建类库,右键添加 "文本模板" 添加完成之后生成如下后缀为 tt的文件: 双击文件:TextTemplate_Test.tt 文件打开,替换代码如下 <#@ templat ...