如图，需要使用jQuery实现全选、全不选、反选功能：

核心代码：

全选

$("#check_all").click(function(){

    $("input:checkbox").prop("checked",true);

});

全不选

$("#check_no").click(function(){

    $("input:checkbox").prop("checked",false);

});

反选

$("#check_reverse").click(function(){

    $("input:checkbox").each(function(){

        $(this).prop("checked",!$(this).prop("checked"));

    });

});

全选/全不选

$("#check_switch").click(function(){

    $("input:checkbox").is(":checked")?$("input:checkbox").prop("checked",false):$("input:checkbox").prop("checked",true);

});

全部代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="js/jquery.min.js"></script>

    <script>

        $(document).ready(function(){

            //全选

            $("#check_all").click(function(){

                $("input:checkbox").prop("checked",true);

            });

            //全不选

            $("#check_no").click(function(){

                $("input:checkbox").prop("checked",false);

            });

            //反选:使用了each(),针对每个操作

            $("#check_reverse").click(function(){

                $("input:checkbox").each(function(){

                    $(this).prop("checked",!$(this).prop("checked"));

                });

            });

            //全选/全不选

            $("#check_switch").click(function(){

                $("input:checkbox").is(":checked")?$("input:checkbox").prop("checked",false):$("input:checkbox").prop("checked",true);

            });

        });

    </script>

</head>

<body>

    <ul>

        <li><input type="checkbox">aa</li>

        <li><input type="checkbox">bb</li>

        <li><input type="checkbox">cc</li>

        <li><input type="checkbox">dd</li>

        <li><input type="checkbox">ee</li>

    </ul>

    <button id="check_all">全选</button>

    <button id="check_no">全不选</button>

    <button id="check_reverse">反选</button>

    <button id="check_switch">全选/全不选</button>

</body>

</html>

jQuery实现全选、全不选、反选的更多相关文章

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

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

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

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

  3. 用jQuery实现全选-全不选-反选的功能

    临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...

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

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

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

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

  6. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

  7. jquery 全选 全不选 反选

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...

  8. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  9. 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]

    全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

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

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

随机推荐

  1. ElasticSearch学习-centos下安装

    1.安装java运行环境(jre) //这里我安装了jdk 其实只需要安装jre就可以了 0)cd /usr;mkdir /usr/java; cd java 1)wget http://downlo ...

  2. swift基础语法（四） 函数、闭包（Closures）

    //函数基本定义 func 函数名(参数名:参数类型=默认值) ->返回值类型{代码块} //无参无返回值函数 func hsmin(){ } //单参无返回值函数 func prin(st:S ...

  3. enum类型学习笔记

    如:enum color {red,white,yellow,green} 枚举出一种类型中的多个变量 enum本质为int,可以作为int使用: enum默认值为0,1,2... 以上的定义中: e ...

  4. 复星昆仲杨光：VR行业四大痛点

    2016年,可是说是VR产业的爆发之年,从公司层面到资本层面都对VR产业给予了厚望,期望其能够在移动互联网之后带来革命性的突破,掀起新一轮技术主导的商业革命.而创业者们已经跃跃欲试,期望在资本的支持下 ...

  5. MYSQL绿色安装过程

    # These are commonly set, remove the # and set as required. basedir = "D:\Program Files\mysql-5 ...

  6. Object-C内存管理－对象引用计数的特例

    看到OC中内存管理这块,其中的引用计数部分,部分10.5上的EBOOK示例已经在10.9上不能运行正确了,比如下面的代码: NSString * str1 = @"string 1" ...

  7. java轻量级Http Server

    lighttpd 官方主页:www.lighttpd.netLighttpd是一个德国人领导的开源软件,其根本的目的是提供一个专门针对高性能网站,安全.快速.兼容性好并且灵活的web server环境 ...

  8. IOS 获取当前对象所在的VC

    id next = [self nextResponder] ; while (next != nil) { next = [next nextResponder]; if ([next isKind ...

  9. android更换工具链

    欢迎转载opendevkit文章, 文章原始地址: http://www.opendevkit.com/?e=73 android编译系统是跟随android源码一起发布的,使用了gcc编译器,也就是 ...

  10. [ASE]sprint2 总结 & sprint3计划

    第二个sprint半圆满的结束了, 经历了四周之后我们将整个的框架搭建好,并且能够正常的游戏对战,破坏场景,聊天…… 但是正如老师所述,缺乏亮点. 不过大家都是第一次做,完全把他当成一个工程来一点一点 ...