临近过年,刚学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. C标准库pow函数精度问题。

    #include <stdio.h> int main () { int temp,i; double a=2.4568; unsigned ]; ;i<;i++) { temp=( ...

  2. (转)explain、db2exfmt 命令的使用：文本输出执行计划

    原文:http://blog.51cto.com/freebile/1068610 db2有图形执行计划显示工具,如果没有图形环境,如unix主机,可以生成文本的文件来显示执行计划1.如果第一次执行, ...

  3. 执行shell脚本的四种方式（转）

    原文网址:https://www.jb51.net/article/53924.htm 这篇文章主要介绍了Linux中执行shell脚本的4种方法,即总结在Linux中运行shell脚本的4种方法. ...

  4. 全网最详细的Hadoop HA集群启动后，两个namenode都是active的解决办法（图文详解）

    不多说,直接上干货! 这个问题,跟 全网最详细的Hadoop HA集群启动后,两个namenode都是standby的解决办法(图文详解) 是大同小异. 欢迎大家,加入我的微信公众号:大数据躺过的坑  ...

  5. php 获取请求参数

    $value = $_POST["value"];//取得post中的 $value=$_REQUEST["value"];//取得get或者post中的参数( ...

  6. EOS 理解

    1.通过石墨烯技术来解决延迟和吞吐量. 2.账户体系:账户是可读的唯一标识符,不是地址.可包含多对公私钥.账户有权限规划.权限有阈值,公私钥有权重,公私钥的权重大于等于阀值才能拥有该权限进行相应操作. ...

  7. [Python学习笔记-004] 可变参数*args和**kwargs

    在Python中,可变参数的传递使用*args和**kwargs来实现,其中: *args表示任意个位置参数(positional argument),被表示为一个只读的数组(tuple): **kw ...

  8. 基于opencv将视频转化为字符串Java版

    基于opencv将视频转化为字符串Java版 opencv java  先上一个效果图吧 首先,弄清一下原理 我们要将视频转化为字符画,那么就需要获取画面的每一帧,也就是每一张图片,然后将图片进行转化 ...

  9. double转换为int以及浮点型相加损失精度问题

    最近在做支付相关模块的业务,数据库字段却使用的是double类型,其实也行,只要计算不在sql语句中进行,也是没有问题的. 预先的类属性设置的是Double类型,自己算的时候发现小数相加会出现损失精度 ...

  10. es6学习笔记8--Map数据结构

    Map Map结构的目的和基本用法 JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是只能用字符串当作键.这给它的使用带来了很大的限制. var data = {} ...