基本思路：

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. python3验证码机器学习

    python3验证码机器学习 文档结构为 -- iconset -- ... -- jpg -- captcha.gif -- py -- crack.py 需要的库 pip3 install pil ...

  2. python获取字典的key列表

    获取字典的所有key: # !/usr/bin/python3.4 # -*- coding: utf-8 -*- b = { 'video':0, 'music':23 } print(list(b ...

  3. Android应用开发-网络编程(二)（重制版）

    Apache HttpClient框架 GET方式请求提交数据 1. 创建一个HttpClient HttpClient hc = new DefaultHttpClient(); 2. 创建一个Ht ...

  4. [2014.01.27]WFsoft.wfLibrary.wfVerifyImage 1.8

    全新开发的验证码图片控件--WFsoft.wfLibrary.wfVerifyImage,使用简单,功能强大.     完全支持.net 2.0编写,对下一代操作系统平稳过渡.     同时支持.ne ...

  5. 将 ASP.NET MVC3 Razor 项目部署到虚拟主机中

    国内很多网站空间都只支持.NET 2.0 和 .NET 3.0 3.5,很少有空间商支持.NET 4的,即使有个别支持.NET 4,但是不支持MVC的默认路由访问形式. Go Daddy 的主机支持, ...

  6. 【sql】之查询昨天的记录

    http://blog.csdn.net/cangchen/article/details/44978531

  7. AMap行政区查询服务

    AMap.DistrictSearch行政区查询服务插件,提供全国各省.市.县.区的中心点经纬度.行政区边界坐标组.下级行政区等信息.根据行政区边界坐标组可在地图上绘制行政区边界.(本文为原创,并在项 ...

  8. HttpWebRequest-header设置

    http://www.cnblogs.com/yczz/archive/2012/06/01/2530484.html http://blog.csdn.net/htsnoopy/article/de ...

  9. [ActionScript 3.0] 将组件 SWC 文件导入 Flash

    在向其它开发人员分发组件时,您可以包含以下说明,以便他们能够立即安装和使用组件.  导入 SWC 文件: 将 SWC 文件复制到 Configuration/Components 目录中. 重新启动 ...

  10. Python format格式化输出

    http://www.jb51.net/article/63672.htm 推荐参考 >>> '{0},{1}'.format('hello','python') 'hello,py ...