临近过年,刚学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. VBA操作word生成sql语句

    项目开始一般都是用word保存下数据库的文档 但是从表单一个一个的建表实在是很困难乏味,查查资料 1.可以生成一个html或者xml,检索结构生成sql.但是这个方式也蛮麻烦 2.查到vba可以操作w ...

  2. MyBatis全局配置文件标签详解

    一.全局配置文件结构 configuration 配置 properties 属性:可以加载properties配置文件的信息 settings 设置:可以设置mybatis的全局属性 typeAli ...

  3. tomcat设置默认欢迎页、server.xml配置文件中的标签理解

    一:要求:输入网址,不加文件名便可以访问默认页面 (1)项目中只有静态文件 方法:更改tomcat下的conf目录下的web.xml文件,如下图: <welcom-file-list>元素 ...

  4. 【xsy2504】farm 容斥原理

    题目大意:给你三个数$n,m,s$,满足$n,m,s≤10^{18}$且最大质因数均不大于$10^6$. 问你存在多少个整数$k$,满足$0≤k≤m$,且$(k,0)$,$(0,n)$,$(x,y)$ ...

  5. POJ 2453

    #include <iostream> #include <algorithm> #include <cmath> #define MAXN 1000 #defin ...

  6. HuLu机器学习问题与解答系列(1-8)

    声明:本系列文章转载自微信公众号HULU,本人只是搬运工,仅供学习,如有不妥,后续告知删除. 嗨,欢迎回来,希望你能保持定期回顾的好习惯噢!下面是Hulu机器学习问题与解答系列的前8篇内容,点击主题名 ...

  7. WTF小程序之<web-view>

    叨叨两句 昨天爬了一下午坑才出来的我向大家问好

  8. 第一章-Javac编译器介绍

    1.Javac概述 编译器可以将编程语言的代码转换为其他形式,如Javac,将Java语言转换为虚拟机能够识别的.class文件形式.而这种将java源代码(以.java做为文件存储格式)转换为cla ...

  9. java学习-http中get请求的非ascii参数如何编码解码探讨

    # 背景: 看着别人项目代码看到一个PathUtils工具类, 里面只有一个方法,String  rebuild(String Path),将路径进行URLDecoder.decode解码,避免路径中 ...

  10. springboot-33-使用maven打瘦包

    直接使用maven的插件打包的话, 打出来一个jar, 会非常大, 有时候在服务上传的时候会非常不方便, <plugin> <groupId>org.springframewo ...