<!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. POST注入之sqlmap

    POST注入方法一加—form跑数据库sqlmap.py -u http://59.63.200.79:8815/Pass-05/index.php —form —dbs跑出数据库后查询表名 假设库名 ...

  2. 五种编程语言解释数据结构与算法——顺序表2（java与C++语言实现）

    5.java实现方式: 5.1.顺序表的抽象结构 package com.xgp.顺序表; public interface MyList<T> { //1. initList(& ...

  3. DOM基础+domReady+元素节点类型判断

    DOM节点类型  nodeType element  1    Node.ELEMENT_NODE   元素节点 attr  2   Node.ATTRIBUTE_NODE  属性节点 text  3 ...

  4. css3基础-动画案例（没啥实用性，纯粹好玩的）

    会动的汉克狗: <!doctype html> <html lang="en"> <head> <meta charset="U ...

  5. 鼠标经过INPUT时自动获取焦点

    鼠标经过INPUT时自动获取焦点 <input type="text" name="addr" onMouseOver="this.focus( ...

  6. QPixmap和QImage

    1.QPixmap QPixmap的设计本来就是用来加速显示,用paint绘图时用QPixmap会比其他类的效果好很多.一般小图片用QPixmap. 2.QImage 依赖软件,直接像素访问,适合大图 ...

  7. linux下ftp(vsftpd)添加用户及设置权限详细步骤

    1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test2.建用户:在root用户下:useradd test //增加用户test,并制定test用户的主目录为/hom ...

  8. mysql 基础sql语法总结（一）DDL

    mysql数据库: SQL数据库语言可分为四部分: 1.DDL:对数据库或表的进行操作结构操作 2.DML:对表的记录进行更新(增.删.改)* 3.DQL:对表的内容进行查询 **(重难点) 4.DC ...

  9. Cloud插件，链接oracle数据库

    业务场景:客户需要在Cloud中获取第三方系统的数据,但是第三方系统的数据库是oracle,这是就需要连接oracle数据库获取数据了. 需要引用Oracle.ManagedDataAccess.dl ...

  10. Win10下安装tensorflow详细过程

    首先声明几点: 安装tensorflow是基于Python的,并且需要从Anaconda仓库中下载. 所以我们的步骤是:先下载Anaconda,再在Anaconda中安装一个Python,(你的电脑里 ...