如图，需要使用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. 2016某知名互联网公司PHP面试题及答案

    1 字符串"\r","\n","\t","\x20"分别代表什么 答案: "\r"代表的含义是: 在 ...

  2. 七个高效的文本编辑习惯（以Vim为例）

    七个高效的文本编辑习惯 如果你花很多时间输入纯文本.写程序或HTML,那么通过高效地使用一个好的编辑器,你可以节省大部分时间.本文将提供指导和提示,让你更迅速地做这些工作,并且少犯错误. 本文用开源文 ...

  3. 如何搭建Java开发环境（包括下载、安装和配置JDK）和Eclipse的安装

    JDK的下载 1.打开网址https://www.oracle.com/index.html 2.下载JDK JDK的安装 设置环境变量(以windows 7 为例) 1. 在“计算机”图标上单击鼠标 ...

  4. Popup - 弹出层

    //图片类快捷弹出层 <a href="" target="_blank"> <div class="panlifang1" ...

  5. IT小喇叭，关注于移动互联网创新、创业的科技媒体

    IT小喇叭(itxiaolaba.cn),成立于2015年6月,成都芮嘉科技有限公司旗下品牌.主要负责媒体资源整合,媒体渠道接入,产品宣传,资源整合.对接等,是企业产品宣传,品牌营销的首选. 通过近一 ...

  6. HtmlAgilityPack组件

    HtmlAgilityPack组件用于解析Html字符串,一个典型的应用场景是用于网页爬虫. 示例程序 using Common.Tools; using Datebase.Entity; using ...

  7. zabbix利用mutt和msmtp配置邮件报警

    Mutt安装 yum –y install mutt msmtp安装 yum –y install openssl openssl-devel libntlm libntlm-devel cyrus- ...

  8. ILSpy搜索功能加强版

    1.修改搜索功能,增加如下的额外搜索选项 A.按文本搜索(默认选项) B.按通配符搜索 C.按正则表达式搜索 2.搜索增加如下特性: A.可以按照名字空间检索特定名字空间下的所有类. B.修正了官方版 ...

  9. 『TCP/IP详解——卷一：协议』读书笔记——17

    2013-08-27 15:37:42 6.5 ICMP端口不可达差错 端口不可达报文是ICMP差错报文的一种,它是ICMP不可达报文中的一种,以此来看一看ICMP差错报文中所附加的信息.使用UDP来 ...

  10. berkeley db replica机制 - 消息处理

    repmgr_method.c, __repmgr_start_int()repmgr_method.c, __repmgr_start_msg_threads()repmgr_msg.c, __re ...