如图，需要使用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. hadoop多次搭建后，完整总结（累死宝宝了，搭建了十多遍了）

    1.安装JDK1.1上传运用软件FileZilla,将windows上的jdk压缩包放到linux的root目录下 1.2解压jdk #创建文件夹 mkdir /usr/java(不要挂在在" ...

  2. springboot maven install 找不到符号

    好多朋友在网上找maven install 找不到符号,我今天也遇到了同样的问题,我项目结构如下: 在multicreate-web这个项目引用了multicreate-service的jar包,在i ...

  3. Ubuntu 12.04 安装MySQL

    本文地址:http://www.cnblogs.com/yhLinux/p/4012689.html 本文适合新手入门. 本文是对 Ubuntu 12.04 环境下安装 MySQL 的记录,通过这两天 ...

  4. 用 R 进行高频金融数据分析简介

    作者:李洪成 摘自:http://cos.name/wp-content/uploads/2013/11/ChinaR2013SH_Nov03_04_LiHongcheng.pdf 高频数据 金融市场 ...

  5. 搜索引擎 ElasticSearch 之 步步为营2 【基础概念】

    在正式学习 ElasticSearch 之前,首先看一下 ElasticSearch 中的基本概念. 这些概念将在以后的章节中出现多次,所以花15分钟理解一下是非常值得的. 英文好的同学,请直接移步官 ...

  6. lazy?

    https://developer.jboss.org/wiki/LazyEJB31timerservicedeploymentstartingJBossAS600M5 2016-09-28 18:5 ...

  7. SAS 画折线图PROC GPLOT

    虽然最后做成PPT里的图表会被要求用EXCEL画,但当我们只是在分析的过程中,想看看数据的走势,直接在SAS里画会比EXCEL画便捷的多. 修改起来也会更加的简单,,不用不断的修改程序然后刷新EXCE ...

  8. U盘的不识别问题

    1.案例: 我重新装过电脑以后出现过一个问题是: 我的U盘只能在我电脑上用,在其他电脑上不能用 其他人的U盘不能在我的电脑上用. 2.根本问题: 是驱动问题.接口上没符合的驱动,未能指定路径.电脑上可 ...

  9. word-wrap&&word-break，奇偶行、列设置样式

    1.word-wrap和word-break区分. 来源场景:机械租赁mvc驾驶员信息查看: 当备注的文字多的时候,第一列的值成这模样: 解决方案:设置table 的td可自动换行.首先table设置 ...

  10. jpa更新数据出错

    在更新表的一条记录时出错,错误为“java.sql.SQLException: Field 'is_del' doesn't have a default value”,表有一个属性isDel为Boo ...