如图，需要使用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. floyd算法小结

    floyd算法是被大家熟知的最短路算法之一,利用动态规划的思想,f[i][j]记录i到j之间的最短距离,时间复杂度为O(n^3),虽然时间复杂度较高,但是由于可以处理其他相似的问题,有着广泛的应用,这 ...

  2. gc roots 垃圾回收

    gc roots包括以下几个: 虚拟机栈(栈桢中的本地变量表)中的引用对象 方法区中的类静态属性引用的对象 方法区中的常量引用的对象 本地方法栈中JNI(即native方法)的引用的对象 java,c ...

  3. MVC, MVP, MVVM比较以及区别

    MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...

  4. 设置代码Code高亮显示成蓝色

    下面方法是让设置的关键字高亮显示,考虑到了注释与字符串的影响,所以备用,以便将来能够用到. private static void ColorizeCode(RichTextBox rtb) { st ...

  5. TypeError: matchExpr[type].exec is not a function

    遇到了这个问题,很久没找到答案,后来使用了万能的google,貌似也没找到答案. 详细描述下: 通过使用 $(".select")来选择jqeury对象,没问题. 通过$(&quo ...

  6. Linux下VirtualBox启动物理硬盘上已安装的Window 8系统

    创建虚拟机 1.创建一个没有硬盘的windows虚拟机,与已安装在物理硬盘上的系统一致.2.通过命令行在创建的虚拟机目录下创建一个指向物理硬盘的虚拟硬盘 VBoxManage internalcomm ...

  7. NPIO 导出记录

    http://www.cnblogs.com/qingyuan/archive/2012/11/08/2760034.html http://www.cnblogs.com/gaoshuai/arch ...

  8. 第8章 NAND FLASH控制器

    8.1 NAND Flash介绍和NAND Flash控制器使用 NAND Flash在嵌入式系统中的地位与PC上的硬盘类似 NAND Flash在掉电后仍可保存 8.1.1 Flash介绍 有NOR ...

  9. Export GridView Data to Excel. 从GridView导出数据到Excel的奇怪问题解析

    GridView导出函数内容如下 string attachment = "attachment; filename=Contacts.xls";            Respo ...

  10. 【转】windows消息和消息队列详解

    转载出处:http://blog.csdn.net/bichenggui/article/details/4677494  windows消息和消息队列 与基于MS - DOS的应用程序不同,Wind ...