基本思路：

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. mysql总结

    //查询日期之前的差距     select user_name ,    from_unixtime(user_lastlogin_time),now() ,        year(now())- ...

  2. Excel 去掉每次打开弹出自定义项安装的弹窗

    弹窗: 解决方案: 一.打开“文件”——“选项”如图. 二.选择“加载项”,下面的“管理”,选择“COM加载项”,然后点击“转到”,弹出框: 三:在“可用加载项”下面你会发现有一项是“LoadTest ...

  3. C#调试心经续(转)

    断点篇 命中次数(Hit Counts) 右击断点,可以设置Hit Counts(命中次数),会弹出如下的对话框 当条件满足的时候断点会被命中(即即将被执行),这个命中次数是断点被命中的次数.默认是始 ...

  4. cWeb开发框架，基于asp.net的cWeb应用开发平台介绍（二）

    cWeb是基于微软的.Net Framework 4框架,数据库是sql server 2008 r2. cWeb开发框架下载,点击这里去下载. cWeb开发框架借鉴三层架构理论分为三层,分别是:cD ...

  5. 如何在 Delphi 中静态链接 SQLite

    搞了我几个小时,终于成功在 Delphi 中静态链接了 SQLite (v3.5.4),下一步就是研究加密了,呵呵中间其实遇到很多问题,今天累了,就不说了,改天补上 下载测试工程 下面说说方法 1.当 ...

  6. MySQL基础原创笔记

    对表的增删改操作: 创建表: create table student (          id  int  primary key  auto_increment,          name   ...

  7. Keepalive双主搭建配置

    Keepalive 双主搭建配置 keepalived保证双主数据库的可用性 环境说明 192.168.1.10  keepalive 主1 192.168.1.20  keepalive 主2 19 ...

  8. C#获取json字符串指定的值

    Newtonsoft.Json在json和对象之间转化是一个非常强大的工具. 对象转化json字符串 Newtonsoft.Json.JsonConvert.SerializeObject() jso ...

  9. SparkSQL（源码阅读三）

    额,没忍住,想完全了解sparksql,毕竟一直在用嘛,想一次性搞清楚它,所以今天再多看点好了~ 曾几何时,有一个叫做shark的东西,它改了hive的源码...突然有一天,spark Sql突然出现 ...

  10. /etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc

    /etc/profile./etc/bashrc.~/.bash_profile.~/.bashrc很容易混淆,他们之间有什么区别?它们的作用到底是什么?/etc/profile: 用来设置系统环境参 ...