基本思路：

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. qt的moc,uic,rcc命令的使用

    qt是一个c++的界面库,其特点就是其源码可以跨平台编译,这样在写自己的小工具时可以方便地在windows,mac或linux环境下移植了.在windows下写c++程序当然选vs,在mac下写程序当 ...

  2. day1作业--登录入口

    作业概述: 编写一个登录入口,实现如下功能: (1)输入用户名和密码 (2)认证成功后显示欢迎信息 (3)输错三次后锁定 流程图: readme: 1.程序配置文件: 黑名单文件blacklist.t ...

  3. mysql:权限分配

    grant all privileges on *.* to  name@localhost identified by '1'; flush privileges;

  4. 【学】jQuery的源码思路6——增加each,animaion,ajax以及插件机制

    each() 插件机制 animation ajax //each() //这里第一个参数指定将this指向每次循环到的那个元素身上,而第三个参数element其实就是this本身所以和第一个参数是一 ...

  5. bootstrapvalidator校验、校验清除重置

    //保存 function saveAdmin(){ //开启验证 $('#saveadmin_form').data('bootstrapValidator').validate(); if(!$( ...

  6. File存对象--android 的File存储到SD卡();

    方法1:android File存对象--File存储到SD卡(); 1.保存对象到本地或SD卡需要注意的是,要保存的对象(OAuthV1)一定要实现了Serializable接口.实现了Serial ...

  7. Druid数据库连接池配置

    DRUID是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0.DBCP.PROXOOL等DB池的优点,同时加入了日志监控,可以很好的监控DB池连接和SQL的执行情况,可以说是针对监控而生的DB ...

  8. git push error: A Contributor Agreement must be completed before uploading

    因为是从官方版本库做的镜像,所以有些权限直接从官方同步到了本地. 今天,有同事执行git push操作,报错: 根据网上搜索的内容,在gerrit.config中[auth]中添加如下内容: [aut ...

  9. Ext 三级联动 及附值

    /// <reference path="../../ext.js" />Ext.define('Myview.Region', { extend: 'Ext.form ...

  10. python中的单引号,双引号,三引号

    转载自: http://blog.csdn.net/wanghai__/article/details/6285310 先说1双引号与3个双引号的区别,双引号所表示的字符串通常要写成一行 如: s1 ...