临近过年,刚学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. iOS-iOS9系统SEGV_ACCERR问题处理【v3.6.3的一些bug修复】

    前言 最近APP不断地更新版本,却发现一些未知的错误导致崩溃,我把能测出来的错误,全部修复了,因为项目里集成了腾讯Bugly,看了下后台的崩溃,依旧千篇一律啊,然后就纠结了,很多SEGV_ACCERR ...

  2. DockerFile(保你会版本)(七)

    一.什么是dockerfile Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile自定义快速创建属于自己的镜像,Dockerfile是通过很多的参数指令编写的文件,通过do ...

  3. 解决Maven的Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart

    eclipse配置好了Maven,创建maven-archetype-quickstart项目报错如下: Could not resolve archetype org.apache.maven.ar ...

  4. [个人项目] echarts 实现数据(tooltip)自动轮播插件

    前言 最近, 工作中要做类似这种的项目. 用到了百度的 echarts 这个开源的数据可视化的框架. 因为投屏项目不像PC端的WEB, 它不允许用户用鼠标键盘等交互. 有些图表只能看到各部分的占比情况 ...

  5. Ajax(javascript)案例

    一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...

  6. Jni如何传递并且修改两个基础参数

    最近在开发jni时,需要返回多个参数给java.这个过程中,碰到了一些问题,值得探讨一下.   具体是这样,jni方法jni_do_something作了底层处理后,得出两个int数据,需要将他们的值 ...

  7. ruby中字符串转换为类

    最近有个需求,需要根据一个字符串当作一个类来使用,例如: 有一个字符串 “ChinaMag”,根据这个字符串调用 类 ChinaMag下的方法. 解决办法: 1. rails可以使用 constant ...

  8. POJ 1007 DNA Sorting（sort函数的使用）

    Description One measure of ``unsortedness'' in a sequence is the number of pairs of entries that are ...

  9. Mybatis 的配置xml和properties放在jar包以外的一种方法

    1.问题 开发时候,将xml和properties放resources,直接可以访问到,然而打包后这两个文件也一同被打包到jar包里面,如果发布后想修改就会比较麻烦,所以希望将xml配置文件和prop ...

  10. C++中的 CONST 含义（从#define 到 CONST 的转变）

    const 与define 两者都可以用来定义常量,但是const定义时,定义了常量的类型,所以更精确一些.#define只是简单的文本替换,除了可以定义常量外,还可以用来定义一些简单的函数,有点类似 ...