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

原生版的实现：

<!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. MySQL配置主主及主从备份

    原文:https://www.cnblogs.com/ahaii/p/6307648.html MySQL主从备份配置实例 场景: 1.主服务器192.168.0.225.从服务器192.168.0. ...

  2. winform 自定义控件:半透明Loading控件

    winform  自定义控件:半透明Loading控件 by wgscd date:2015-05-05 效果: using System;using System.Drawing;using Sys ...

  3. JavaWeb总结（十）

    Filter配置详解 web项目目录示意图 <!-- Filter配置 --> <filter> <display-name>Filter_one</disp ...

  4. HDU 6191 2017ACM/ICPC广西邀请赛 J Query on A Tree 可持久化01字典树+dfs序

    题意 给一颗\(n\)个节点的带点权的树,以\(1\)为根节点,\(q\)次询问,每次询问给出2个数\(u\),\(x\),求\(u\)的子树中的点上的值与\(x\)异或的值最大为多少 分析 先dfs ...

  5. JavaScript快速入门-BOM对象

    一.什么是BOM      概念 BOM(Browser Object Model)即浏览器对象模型.BOM提供了独立于内容,而与浏览器窗口进行交互的对象:      核心 由于BOM主要用于管理窗口 ...

  6. 网络知识 ACL NAT IPv6

    第1章 ACL 访问控制列表 访问控制表(Access Control List,ACL),又称存取控制串列,是使用以访问控制矩阵为基础的访问控制方法,每一个对象对应一个串列主体. 访问控制表描述每一 ...

  7. [PLC]ST语言七：MOV_SMOV_CML_BMOV_FMOV_XCH_BCD_BIN

    一:MOV/SMOV/CML/BMOV/FMOV/XCH/BCD/BIN 说明:简单的顺控指令不做其他说明. (MOV)控制要求:无 (MOV)编程梯形图: (MOV)结构化编程ST语言: (*传送指 ...

  8. pandas安装以及出现的问题

    pandas安装以及出现的问题 1.pandas 安装 pandas是Python的第三方库,所以使用前需要安装一下,直接使用pip install pandas就会自动安装,安装成功后显示的以下的信 ...

  9. vue处理循环列表动态数据问题

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE ...

  10. 基础：enctype 包含上传input时必须（解决图片上传不成功问题）

    今天在做一个上传图片的时候,死活就是看不到传过去的值..对比了写法没发现问题,后来抱着试试看的心,查看下了 from里的写法.发现缺少了enctype.不了解这个用法,特意百度了下. enctype ...