临近过年,刚学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. 修改oracle默认监听端口

    修改oracle默认监听端口 oracle端口修改 主要是修改两个文件和修改oracle参数local_listener 1 查看当前监听状态 [oracle@test ~]$ lsnrctl sta ...

  2. day 74 vue 2 axios数据请求 以及组件的学习

    前情提要:   vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...

  3. 谈一谈对MySQL InnoDB的认识及数据库事物处理的隔离级别

    介绍: InnoDB引擎是MySQL数据库的一个重要的存储引擎,和其他存储引擎相比,InnoDB引擎的优点是支持兼容ACID的事务(类似于PostgreSQL),以及参数完整性(有外键)等.现在Inn ...

  4. python批量拷贝文件

    普通批量拷贝文件 import os import shutil import logging from logging import handlers from colorama import Fo ...

  5. Storm的acker确认机制

    Storm的acker消息确认机制... ack/fail消息确认机制(确保一个tuple被完全处理) 在spout中发射tuple的时候需要同时发送messageid,这样才相当于开启了消息确认机制 ...

  6. Quartz.NET在ASP.NET 中使用

    Quartz.NET 项目地址 http://quartznet.sourceforge.net/ common logging是一个通用日志接口,log4net是一个具体实现 ,也可以使用NLog, ...

  7. 配置codis-proxy

    在整个的处理过程之中,虽然利用codis可以帮助我们动态实现主从的配置,但是从实际来讲用户不可能直接去操作redis客户端,必须通过codis-proxy来代理,所以需要针对于codis-proxy进 ...

  8. 25-hadoop-hive-函数

    内置函数: 函数分类: 内置函数查看: show funcitons; 查看函数描述: DESC FUNCTION concat; 具体见: https://cwiki.apache.org/conf ...

  9. 如何设置httpd-mpm-conf的参数

    原文链接:http://blog.sina.com.cn/s/blog_626998030102wohs.html 首先确定apache是使用哪种工作模式是prefork模式还是worker模式查看方 ...

  10. tsung压力测试——Tsung测试统计报告说明【转】

    1.主要统计信息 Tsung统计数据是平均每十秒重置一次,所以这里的响应时间(连接.请求.页面.会话)是指每十秒的平均响应时间: connect: 表示 每个连接持续时间: Hightest 10se ...