基本思路：

1全选：点击全选按钮的时候，将input的属性checked设置为true;

2全不选：点击全不选按钮的时候，将input的属性checked设置为false;

3反选：点击反选按钮的时候，提取出当前转态的时候，已经被选中的input的索引值，然后将被选中的按钮的属性checked设置为false；没有被选中使一样的道理；

注意：想要获取到input的checked不能用attr应该用prop；checked为true的时候input被选中，checked为false的时候input未被选中；

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <label>全选</label><input type="checkbox" class="allclick"/>

        <label>全不选</label><input type="checkbox" class="allnoclick"/>

        <label>反选</label><input type="checkbox" class="noclick"/>

        <div class="box">

            <input type="checkbox" data-click="yes"/>

            <input type="checkbox" data-click="yes"/>

            <input type="checkbox" data-click="yes"/>

            <input type="checkbox" data-click="yes"/>

        </div>

        <script src="js/jquery-1.7.2.js"></script>

        <script>

        $(function(){

            //全选 只是针对全选

            $(".allclick").click(function(){

                var mark=$(".allclick").prop("checked");

                if(mark==true){

                    $(".box input").prop("checked",true);

                }

            });

            //全不选 只是针对全不选中

            $(".allnoclick").click(function(){

                var mark=$(".allnoclick").prop("checked");

                if(mark==true){

                    $(".box input").prop("checked",false);

                }

            });

            //反选

            $(".noclick").click(function(){

                $(".box input").each(function(i){

                    var mark=$(".box input").eq(i).prop("checked");

                    if(mark==true){//已经被选中

                        $(".box input").eq(i).prop("checked",false);

                    }else if(mark==false){//没有被选中

                        $(".box input").eq(i).prop("checked",true);

                    }

                });

            });

        });

        </script>

    </body>

</html>

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

  1. Jq 遍历 全选 全不选 反选

    //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...

  2. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

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

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

  4. jquery 全选 全不选 反选

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

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

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

  6. JS实现全选、不选、反选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

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

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

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

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

  9. js实现全选/全不选、反选

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

随机推荐

  1. 崽崽帮www.zaizaibang.com精选3

    [景山远洋美国交换生随笔]异国他乡的感触 [成都亲子活动]可能是成都最全最好的亲子活动了! 黄平-儿科 @体育活动 下雪天乐翻天之穿越封锁线 北京育翔小学的前世今生 武汉儿科类中医口碑榜 南宁周边农家 ...

  2. CANVAS 水波动态背景

    参考:https://github.com/cyclegtx/wave_background 做的水波背景,以后可能会用到哈! 效果如下: 代码如下: <!DOCTYPE html> &l ...

  3. dotNet下的一套解决方案

    很久没在博客园写文章了,打算把一直由自己一个人写的一整套系统开放出来,今天先放一些截图及可以演示的地址! 这套系统包含数据层(HB.Data).计划任务(HB.PlanTask).日志系统(HB.Lo ...

  4. VR软件定制外包团队：国内设备开发公司已超90家

    昨日是UNITE 2015 BEIJING大会的第二天,相比于新手训练营和VR Day活动,昨天的大会更加注重分享和展示.Unity 创始人David Helgason在也大会上进行了Unity 5 ...

  5. 承接cardboard外包，unity3d外包（北京动软— 谷歌CARDBOARD真强大）

    手把手教你玩转googlecardboard[不知道在这里发可以不?] 谷歌Google I/O开发者大会于北京时间6月26日0点在美国旧金山举行,谷歌发布了Android L手机系统:Android ...

  6. IE8下调用Active控件

    之前在IE6下运行正常的Active控件,浏览器升级到IE8后全部失效,并呈浏览器崩溃状. 网上搜了一圈得到如下解决方法: 1.设置信任站点 2.还需要在IE浏览器菜单 “工具>Internet ...

  7. Xxtea加解密

    转自:http://www.cnblogs.com/luminji/p/3406407.html 很有意思的一件事情,当我想要找 Xxtea 加解密算法的时候,发现了前同事(likui318)的代码, ...

  8. HotSpot 自动内存管理笔记与实战

    1.对象的创建 虚拟机遇到一条new指令时,首先会去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初始化过.如果没有,则必须先进行相应的类的 ...

  9. 新安装loadrunner无法录制脚本的原因之一及解决方案

    eg:IE浏览器 1.新安装的loadrunner录制脚本,一直是加载中的状态: 2.苦思冥想终于找到解决方案: 3.IE浏览器-->设置-->Internet选项 4."安全& ...

  10. sql server 常见问题笔记

    1.关于复制类型 快照发布:发布服务器按预定的时间间隔向订阅服务器发送已发布数据的快照. 事务发布:在订阅服务器收到已发布数据的初始快照后,发布服务器将事务流式传输到订阅服务器. 对等发布:对等发布支 ...