今天来做一些练习，做全选练习

原生版的实现：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        </style>

    </head>

    <script type="text/javascript">

        window.onload = function(){

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

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

            //全选

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

            checkedAllBtn.onclick = function(){

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

                    items[i].checked = true;

                }

                //更新全选和全不选

                checkedAllBox.checked = true;

            }

            //全不选

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

            checkedNoBtn.onclick = function(){

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

                    items[i].checked = false;

                }

                //更新全选和全不选

                checkedAllBox.checked = false;

            }

            //反选

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

            checkedRevBtn.onclick = function(){

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

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

                    if (!items[i].checked) {

                        checkedAllBox.checked = false;

                    }

                }

            }

            //提交

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

            sendBtn.onclick = function(){

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

                    if(items[i].checked){

                        alert(items[i].value)

                    }

                }

            }

            //通过点击全选和全不选，items也选中

            checkedAllBox.onclick = function(){

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

                    items[i].checked = this.checked;

                }

            }

            //通过点击items，如果有全选则全选、全不选也出现

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

                items[i].onclick = function(){

                    checkedAllBox.checked = true;

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

                    if(!items[j].checked){

                        checkedAllBox.checked = false;

                        break

                    }

                }

                }

            }

        }

    </script>

    <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>

功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'提交': 提示所有勾选的爱好
5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态

　　　　　　　　$(function(){

                var $items = $(":checkbox[name='items']");

                var $checkedAllBox = $("#checkedAllBox");

                //1. 点击'全选': 选中所有爱好

                $("#checkedAllBtn").click(function(){

                //$items.each(function(){

                //this.checked = true;

                //})

                ////全选/全不选选项

                //$checkedAllBox[0].checked = true;

                $items.prop("checked",true);

                $checkedAllBox.prop("checked",true);

                });

                //2. 点击'全不选': 所有爱好都不勾选

                $("#checkedNoBtn").click(function(){

                    $items.prop("checked",false);

                    $checkedAllBox.prop("checked",false);

                });

                //3. 点击'反选': 改变所有爱好的勾选状态

                $("#checkedRevBtn").click(function(){

                    $items.each(function(){

                        this.checked = !this.checked;

                    })

                    $checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)

                });

                //4. 点击'提交': 提示所有勾选的爱好

                $("#sendBtn").click(function(){

                    $items.filter(':checked').each(function () {

                      alert(this.value)

                    })

                });

                //5. 点击'全选/全不选': 选中所有爱好, 或者全不选中

                $checkedAllBox.click(function(){

                    $items.prop("checked",this.checked);

                });

                //6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态

                $items.click(function(){

                    $checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)

                })

            })

全选练习-原生版和jQuery的更多相关文章

  1. jq变态全选vs原生变态全选

    <script> $(function(){ var num=0; $("#btn").on('click',function(){ if(this.checked){ ...

  2. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jQuery入门简单实现反选与全选

    //html代码<input type="checkbox" id= 'all' value="全选"> 选择全部 一键上路 <input t ...

  5. Jquery学习之路(一) 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...

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

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

  7. jquery版的全选，全不选和反选

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  8. jQuery对复选框（checkbox)的全选，全不选，反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  9. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

随机推荐

  1. 写个hello world了解Rxjava

    目录 什么是Rxjava? 在微服务中的优点 上手使用 引入依赖 浅谈分析Rxjava中的被观察者,观察者 spring boot 项目中使用Rxjava2 什么是Rxjava? 来自百度百科的解释 ...

  2. 初学者下载使用Python遇到的问题看它就行了

    首先在python管网(www.python.org)中找到对应的版本与系统,以(window7系统64位python3.7.3为例) 打开电脑--打开浏览器--输入www.python.org--d ...

  3. 利用shell连接服务器

    #应用 连接timesten 数据库 host = Linux(ip, 'user', 'pwd') # 传入Ip,用户名,密码host.connect() #主机开启cdsql = host.sen ...

  4. ThreadPoolExecutor 使用说明

    它是一个ExecutorService,使用线程池中的线程执行提交的任务.通常我们使用Executors框架,定义使用. 线程池主要用来解决两类问题:通过缓存一定数量的可用线程,避免频繁的线程创建,销 ...

  5. Hbase基本用法

    hbase 一些重要的解释(杂) 访问habse三种方式 访问hbase table中的行,只有三种方式: 1 通过单个row key访问 2 通过row key的range 3 全表扫描 Row k ...

  6. 1、Ansible安装配置

    ansible介绍: Ansible是一款基于Python开发的自动化运维工具,主要是实现批量系统配置.批量程序部署.批量运行命令.批量执行任务等等诸多功能.Ansible是一款灵活的开源工具,能够很 ...

  7. dvwa——sql手动注入和sqlmap自动注入

    手动注入 low: 源码: <?php if( isset( $_REQUEST[ 'Submit' ] ) ) { // Get input $id = $_REQUEST[ 'id' ]; ...

  8. 遇到执行SQL 的参数最大个数

    报错: 传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确.此 RPC 请求中提供了过多的参数.最多应为 2100. 现象是: SQL 执行的参数过多,超过了 最大值 :2100 个. ...

  9. [shell] 脚本之shift和getopts (转载)

    转载地址:http://www.361way.com/shell-shift-getopts/4973.html 建议不熟悉getopts的朋友,此篇要看完,getopts部分内容在原作者上面有改动. ...

  10. 模块-Memcached、Redis

    目录 Mecache 安装 使用 Redis 安装 Python操作Redis 操作模式 连接池 操作 String Hash List Set sort set 其他常用操作 管道 发布订阅 sen ...