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

原生版的实现：

<!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. 生死系列--SongXingZhi

    SongXingZhi,我上中专时的同学,任劳动委员,湖北随州人.其实在上学以及毕业后,我们俩没什么交往,也没说过几句话. 印象比较深的一次是在上什么课时,老师拖堂了 ,他直接从课桌上翻过来,从后门出 ...

  2. springmvc配置中，mapper一直依赖注入不进去的问题记录

    问题还原: service层在引用mapper层接口时,一直依赖注入不进去.查看spring-context.xml配置,也未发现异常[因为以前就是这么配置],但是始终无法注入. 原因: 问题不出在s ...

  3. 从《乱世王者》看腾讯SLG手游如何搭建完整安全服务

    WeTest 导读 <乱世王者>是由腾讯旗下天美工作室群自主研发的一款战争策略手游,在经历了2015年-2017年的SLG品类手游的爆发之势下,于2017年11月21日正式公测. < ...

  4. STM8S——Universal asynchronous receiver transmitter (UART)

    UART基本介绍: 通用异步收发器UART他的功能非常强大 我们只使用UART的全双工异步通信功能,使用中断接收数据. UART_RX:串行数据输入. UART_TX:串行数据输出. 硬件支持: 连接 ...

  5. 腾讯x5webview集成实战

    应用中许多网页由于优化的不够理想,出现加载慢,加载时间长等,而且因为碎片化导致兼容性问题,有一些网页有视频内容,产品还提出各种小窗需求,搞得心力憔悴.找到公开的有crosswalk和x5webview ...

  6. ecCodes 学习 利用ecCodes Python API对GRIB文件进行读写

    参考 https://www.ecmwf.int/assets/elearning/eccodes/eccodes2/story_html5.htmlhttps://confluence.ecmwf. ...

  7. Loadrunner安装使用入门

    1. Loadrunner11安装指南 1)支持的Windows环境 2)安装 开始安装时会提示需要以下软件: .NET Framework v3.5 SP1 Microsoft WSE 2.0 SP ...

  8. 自动化运维工具saltstack05 -- 之salt-ssh模式

    salt-ssh模式 1.说明: salt-ssh即通过ssh得方式进行管理,不需要安装salt-minion, salt-ssh 用的是sshpass进行密码交互的. 2.salt-ssh得局限性 ...

  9. 零基础学python之入门和列表数据（附详细的代码解释和执行结果截图）

    Python学习笔记 1 快速入门 下载安装好Python之后,在开始找到 双击打开一个窗口,这是一个shell界面编辑窗口,点击左上角的file——new file新建一个窗口,这里可以输入完整的代 ...

  10. python破解网吧收费系统，远控网吧电脑设备！

      我今天呢 , 我就没事跟着朋友喝酒喝酒啊.喝了很多啊.晚上到旁边的酒店开了一个房间,到了酒店才十点! 感觉没啥事情干的,那就去网吧走走看把,看到是一个嘟嘟牛的,和上次是一样的.还是照常用MS170 ...