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

原生版的实现：

<!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. PostgreSQL的索引膨胀

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页    回到顶级页面:PostgreSQL索引页 索引膨胀,主要是针对B-tree而言. 索引膨 ...

  2. bzoj2564 集合的面积

    Description 对于一个平面上点的集合P={(xi,yi )},定义集合P的面积F(P)为点集P的凸包的面积. 对于两个点集A和B,定义集合的和为: A+B={(xiA+xjB,yiA+yjB ...

  3. 9 README，全套代码

    BBS+ BLOG系统(仿博客园) 一.概要 欢迎您使用该BBS+BLOG系统,希望在您使用的过程中体验到便捷和愉快的使用感受,并对我们的软件提出您发现的问题和建议,谢谢. 联系邮箱:liangshu ...

  4. Ceph学习之路（三）Ceph luminous版本部署

    1.配置ceph.repo并安装批量管理工具ceph-deploy [root@ceph-node1 ~]# vim /etc/yum.repos.d/ceph.repo [ceph] name=Ce ...

  5. javaweb 报表生成（pdf excel）所需要用到的技术和思路

    pdf: “ 目前开源.成熟.稳定的第三方包只有iText.而用iText生成PDF有三种方式: 调用iText API,用代码“写”出PDF,依赖包:com.itextpdf:itextpdf:5. ...

  6. Java动态代理：一个面包店的动态代理帝国

    文章首发于[博客园-陈树义],点击跳转到原文大白话说Java动态代理:一个面包店的动态代理帝国 代理模式是设计模式中非常重要的一种类型,而设计模式又是编程中非常重要的知识点,特别是在业务系统的重构中, ...

  7. Python 安装与专属 IDE_Pycharm 安装配置、永久激活，赠汉化版！

    这个为什么说是一次学生时代的经历呢,我的出发点并没有是为了吊胃口.确实,这个Python小应用,只能在学生时代用得着吧,尤其是高中和大学,如果你没有想到也没关系,看完我下面说的就会明白了. 对红蜘蛛软 ...

  8. （转）为什么所有浏览器的user-agent都是Mozilla

    最早的时候有一个浏览器叫NCSA Mosaic,把自己标称为NCSA_Mosaic/2.0 (Windows 3.1),它支持文字显示的同时还支持图片,于是Web开始好玩起来. 然后出现了一个新的网页 ...

  9. jQuery瀑布流详解（PC及移动端）

    前言 瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我 ...

  10. Selenium+Python自动化测试学习问题总结笔记

    1.问题描述:不能导入自定义类 错误内容:This inspection detects names that should resolve but don't. Due to dynamic dis ...