<!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. 小白的linux笔记1：CentOS 8 安装与设置

    为了在服务器上跑爬虫,以及学SegNet,研究了一圈看来linux是必学品了.在自己电脑上安装了一个 1.官网下载iso,一个linux dvd是稳定版,选之,另一个stream版是更新更快的测试版, ...

  2. clr via c# 接口

    1,常用接口及其定义 public interface IDisposable{ void Dispose(); } public interface IEnumerable}{ IEnumerato ...

  3. [PHP] 使用PHP在mongodb中进行嵌套查询

    作为文档数据库,数据库中存储的数据是类似json的结构,比如{“modelInfo”:{"status":1,audited:"1"}},想要查询status是 ...

  4. 如何使用 Vue-TCB 快速在 Vue 应用中接入云开发

    什么是 Vue TCB 我自己平时经常会用到 Vue 来开发前端应用.所以,基于 Vue 的插件系统,封装了一个 Vue 插件. 如何使用 1. 安装 vue-tcb 执行如下命令,安装 vue-tc ...

  5. 谷歌BBR拥塞算法内核更新

    为什么想到这个呢,算法什么的又不太懂,这是 因为搭建VPN + BBR 与之简直绝配 有的人搭建SSR ,配一个什么锐速,还需要降内核版本, 而且还容易出错,降了之后更加容易出现兼容性问题,所以偶尔看 ...

  6. 刷题79. Word Search

    一.题目说明 题目79. Word Search,给定一个由字符组成的矩阵,从矩阵中查找一个字符串是否存在.可以连续横.纵找.不能重复使用,难度是Medium. 二.我的解答 惭愧,我写了很久总是有问 ...

  7. 等差数列，for循环，递归和尾递归的对比

    生活中,如果1+2+3+4.....+100,大家基本上都会用等差数列计算,如果有人从1开始加,不是傻就是白X,那么程序中呢,是不是也是这样.今天无意中看到了尾递归,以前也写过,但是不知道这个专业名词 ...

  8. js增删class的方法

    接下来我来介绍两种方法 我们先来一段HTMl代码 <div id="bb"> 你好呀 </div> 接下来我们再来一段css样式 .ob { color:r ...

  9. Spring Boot源码（四）：Bean装配

    为了演示Spring中对象是如何创建并放到spring容器中,这里新建一个maven项目: 其中pom.xm文件中只引入了一个依赖: <dependencies> <dependen ...

  10. P1308 统计单词数（cin，getline() ，transform() ）

    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...