临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利

古人云:学而时习之,不亦说乎.

学习后经常温习所学的知识，也是件令人愉悦的事情.

今日复习JQuery时,想着用它来实现一下选择的功能也是很方便的.

<html>

    <head>

        <meta charset="utf-8" />

        <title>全选/全不选/反选</title>

        <style>

        </style>

    </head>

    <body>

        <input type="checkbox" />政治<br />

        <input type="checkbox" />军事<br />

        <input type="checkbox" />体育<br />

        <input type="checkbox" />新闻<br />

        <input type="checkbox" />娱乐<br />

        <input type="checkbox" />房产<br />

        <input type="checkbox" />美食<br />

        <input type="checkbox" />科技<br />

        <input type="checkbox" />旅游<br />

        <input type="checkbox" />汽车<br />

        <input type="checkbox" />游戏<br />

        <button>全选</button>

        <button>全不选</button>

        <button>反选</button>

    </body>

    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

    <script>

        $(function(){

            $('button:first').click(function(){

                // $(':checkbox').attr('checked', true)

                $(':checkbox').prop('checked', true)

            })

            $('button:eq(1)').click(function(){

                // $(':checkbox').attr('checked', false)

                $(':checkbox').prop('checked', false)

            })

            $('button:last').click(function(){

                // 以匹配到的每个元素作为上下文执行函数

                $(':checkbox').each(function(){

                    // 获取当前的选中状态，然后取反

                    var checked = !$(this).prop('checked')

                    // 重新设置状态

                    $(this).prop('checked', checked)

                })

            })

        })

    </script>

</html>

用jQuery实现全选-全不选-反选的功能的更多相关文章

  1. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  3. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

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

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

  5. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  6. jquery之全选全不选

    <input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...

  7. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了

    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...

  8. jQuery实现全选、不选和反选功能

    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...

  9. jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...

随机推荐

  1. zookeeper的命令使用

    这篇是接着上篇zookeeper集群做的,所以有不熟悉的可以返回看下zookeeper集群的相关内容. 这里是相关的命名行使用方法: 基本命令用法 连接server zkCli.sh -server ...

  2. Python之tkinter中的askyescancel窗口返回值

    if messagebox.askokcancel(title="确认取消",message="您确认注册该账号吗?"): messagebox.showinf ...

  3. 无图形界面安装CentOS

    有些插在ATCA中的x86刀片虽然是提供了Micro HDMI显示接口的,但是可能由于厂家出于节省成本的考量,没有给板卡配备显卡,那么在无图形界面下安装系统,就成为一个运维人员应知的一件事情.这里我们 ...

  4. 基于alpine用dockerfile创建的爬虫Scrapy镜像

    一.下载alpine镜像 [root@DockerBrian ~]# docker pull alpine Using default tag: latest Trying to pull repos ...

  5. How To Scan QRCode For UWP (3)

    这一节主要介绍如何去设置MediaCapture拍照的分辨率. MediaCapture 包含一个 VideoDeviceController对象,凭借它可以控制摄像头的很多设置,其中包括设置拍照的分 ...

  6. vector源码2(参考STL源码--侯捷):空间分配、push_back

    vector源码1(参考STL源码--侯捷) vector源码2(参考STL源码--侯捷) vector源码(参考STL源码--侯捷)-----空间分配导致迭代器失效 vector源码3(参考STL源 ...

  7. 纯CSS3手风琴图片滑动特效

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 制作CSS3制作手风琴图片滑动效果,我们仅 ...

  8. SkipList 跳跃表

    引子 考虑一个有序表:14->->34->->50->->66->72 从该有序表中搜索元素 < 23, 43, 59 > ,需要比较的次数分别为 ...

  9. MySQL中的三中循环 while 、 loop 、repeat 求 1~n 的和

    -- MySQL中的三中循环 while . loop .repeat 求 1-n 的和 -- 第一种 while 循环 -- 求 1-n 的和/* while循环语法:while 条件 DO 循环体 ...

  10. mysql日志查看

    https://www.2cto.com/database/201201/116116.html 是否启用了日志mysql>show variables like 'log_bin'; 怎样知道 ...