<!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. CentOS、Ubuntu的安装

    Linux使用最广泛的2个发行版:CentOS.Ubuntu. CentOS安全性高,常用作企业的服务器,Ubuntu常用作个人桌面. 常见的虚拟机有2个: VM VirtualBox,这个是Orac ...

  2. Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  3. 使用UCSC Genome Browser下载人类所有mRNA序列

    打开UCSC Genome Browser官网.网址:http://genome.ucsc.edu/ 点击导航栏的Genome Data 在新的页面中,点击human,可快速定位至页面中人类基因组数据 ...

  4. 伟大的悲剧——记CSP2019

    伟大的悲剧——记CSP2019 就算伟大,依然悲剧…… 现在我好恨自己 我……差一点……就是省一了…… 这一点是多少呢? 2分! 1名! 省一65人,我第66! 唉……太悲催了…… jx的分数线居然还 ...

  5. python+appium+真机测试

    appium环境搭建 操作系统: Windows 10 被测平台: Android真机 appium服务器: appium Desktop appium客户端: python-client 测试的AP ...

  6. vue(二)--条件语句

    条件语句:v-if     v-else   v-else-if    v-show v-else .v-else-if 必须跟在 v-if 或者 v-else-if之后. 1.v-if <bo ...

  7. .net core 开发 Windows Forms 程序

    我是一名 ASP.NET 程序员,专注于 B/S 项目开发.累计文章阅读量超过一千万,我的博客主页地址:https://www.itsvse.com/blog_xzz.html 引言 .net cor ...

  8. MATLAB实例：二元高斯分布图

    MATLAB实例:二元高斯分布图 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. MATLAB程序 %% demo Multivariate No ...

  9. 剑指offer-面试题38-字符串的排列-全排列

    /* 题目: 输入字符串,打印字符串的所有排列. 输入acc,输出[acc, cac, cca]. */ /* 思路: 将字符串看作两部分,第一个字符串和后面的部分. 将第一个字符串与后面字符串依次交 ...

  10. docker镜像alpine封装nginx1.16.1【dockerfile】

    github地址:https://github.com/laileman/Docker/Dockerfile/alpine-nginx1.16.1 1-目录结构 2- dockerfile内容 3- ...