如图，需要使用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. Cracking-- 1.1 判断字符串中是否有重复字符

    第三种方法为位运算的方法. 位运算符: << 左移  & 与 | 或 #include <iostream> #include <string> #incl ...

  2. WebView cookie 管理

    在Android应用程序中经常会加载一个WebView页,如果需要客户端向WebView传递信息,比如Cookie,也是可以的. 需要应用程序先将Cookie注入进去,打开该网页时,WebView会将 ...

  3. iOS基础之Xcode 8相关

    1.屏蔽日志输出 2.注释相关 注释不能使用:命令运行:  sudo /usr/libexec/xpccachectl  VVDocument方式注释快捷键:option + command + /

  4. kali linux 、 windows、ubuntu三系统的引导问题

    '小飞机'是一个学生,所以接触的东西,虽广泛,但并不精通,在此利用随笔,记录自己的一些学习过程,以及自己的想法,既可以有时间自己复习,也可以顺便帮助别人. 近期由于同学的引诱以及男生天生对于破解的好奇 ...

  5. 编写shell脚本遇到的问题

    运行shell脚本提示“syntax error near unexpected token for((i=0;i<$length;i++))”: 原因是因为Linux下的换行符是 \n 而你在 ...

  6. springboot使用之四：错误页面404处理建议

    每个项目可能都会遇到404,403,500等错误代码,如没有错误页面,则会给用户一个很不友好的界面,springboot项目同样也存在这个问题. 但在官方文档并没有相关配置信息,这就要求我们自己来实现 ...

  7. 数据库中用varbinary存储二进制数据

    问题描述:将图片.二进制文件内容等数据存储在数据库中,并能从数据库中取出还原为图片或文件,数据库存储二进制数据用varbinary字段. 分析:由于之前数据库中没有用过varbinary存储数据,首先 ...

  8. PYTHON学习之路_PYTHON基础（2）

    学习内容: 1.Python数据类型与变量 2.Python字符串 3.Python列表 4.Python while循环 5.Python字典 6.Python实例 一.Python数据类型与变量 ...

  9. Nutch2+Hbase环境部署和基本使用

    由于项目想借助Nutch来做网络爬虫,所以一番研究,发现网上文档比较散,学习的很艰难,因此总结了一些,放上来与大家交流. 1       环境部署 Nutch有1.x系列和2.x系列,主要区别是2.x ...

  10. easyui 》 radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中

    获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...