<!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. Python常用模块sys,os,time,random功能与用法，新手备学。

    这篇文章主要介绍了Python常用模块sys,os,time,random功能与用法,结合实例形式分析了Python模块sys,os,time,random功能.原理.相关模块函数.使用技巧与操作注意 ...

  2. day 17 初始递归

    递归函数 了解什么是递归 : 在函数中调用自身函数 最大递归深度默认是997/998 —— 是python从内存角度出发做的限制 能看懂递归 能知道递归的应用场景 初识递归 —— 算法 —— 二分查找 ...

  3. Eclipse jee最新版国内镜像点下载方式

    Eclipse jee是Eclipse的JavaEE版本,官网服务器在国外,无条件下载的可以使用国内镜像点 清华大学网站镜像网站资料,可用于下载其它版本的Eclipsehttps://mirrors. ...

  4. 洛谷题解 P1292 【倒酒】

    原题传送门 题目描述 Winy是一家酒吧的老板,他的酒吧提供两种体积的啤酒,a ml和b ml,分别使用容积为a ml和b ml的酒杯来装载. 酒吧的生意并不好.Winy发现酒鬼们都非常穷.有时,他们 ...

  5. css字体样式+文本样式

    font-family属性值:具体字体名或者字体集 如果是中文或者有单词之间有空格,需要加双引号 字体集: Serif (有装饰线) Sans-serif (无装饰线) Monospace Cursi ...

  6. EasyUI笔记（二）Layout布局

    本系列只列出一些常用的属性.事件或方法,具体完整知识请查看API文档 Panel(面板)   1. 通过标签创建面板 <div id="p" class="easy ...

  7. MySQL常用命令.md

    链接数据库 ## -h/-u这些后面没有空格 ./bin/mysql -h[ip地址] -P[端口号] -u[用户名] -p[密码] 查看建表语句 show create table [table_n ...

  8. Essential C++ 笔记-1

    本文作者为C++初学者,学习之中难免有误,该文章仅为参考 面向对象概述 继承:改变类之间的关系 多态:让基类的pointer或refence得以十分透明的指向基类的某个派生对象 继承 继承发生在对象与 ...

  9. egg 提交数据 防csrf 攻击 配置

    await ctx.render('from',{csrf:this.ctx.csrf}); 或者 使用中间件 ctx.state.csrf = ctx.csrf;

  10. linq行转列

    using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Text; ...