前段时间做了一个全选和反选的功能，最近不忙了，做了一个简化版的demo。

全部代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>全选反选</title>

    <style type="text/css">

        ul,li{

            list-style: none;

        }

        .btn {

            margin-left: 40px;

        }

    </style>

</head>

<body>

    <ul id="music"></ul>

    <hr>

    <div class="btn">

        <label id="all">

            <input type="checkbox" name="all">全选

        </label>

        <label id="reverse">

            <input type="checkbox" name="reverse">反选

        </label>

    </div>

    <pre></pre>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">

        $(function(){

            var data = [

                '01.大海 ',

                '02.天路 ',

                '03.再回首 ',

                '04.突然的自我 ',

                '05.甘心情愿 ',

                '06.光辉岁月 ',

                '07.雨蝶 ',

                '08.爱拼才会赢 ',

                '09.我只在乎你 ',

                '10..日不落'

            ];

            var html = '';

            for(var i = 0; i < data.length; i++){

                html += '<li>'+

                '<input type="checkbox" name="">'+

                '<span>' + data[i] + '</span>'+

                '</li>';

            }

            $('#music').html(html);

            var $all = $('#all input');

            var $reverse = $('#reverse input');

            var $checkboxEl = $('#music').find('input[type="checkbox"]');

            var len = $checkboxEl.length;

            var n = 0; //input checkbox 选中的个数

            $checkboxEl.on('click', function(){

                if($(this).attr("checked") == 'checked'){

                    $(this).attr("checked", false);

                    n--;

                }else{

                    $(this).attr("checked", true);

                    n++;

                }

                allIsChecked();

            });

            $all.on('click', function(){

                if($(this).attr("checked") == 'checked'){

                    $(this).attr("checked", false);

                    $checkboxEl.attr('checked', false);

                    $checkboxEl.prop('checked', false);

                    n = 0;

                }else{

                    $(this).attr("checked", true);

                    $checkboxEl.attr('checked', true);

                    $checkboxEl.prop('checked', true);

                    n = len;

                }

            });

            $reverse.on('click', function(){

                $checkboxEl.each(function(i, el){

                    if($(this).attr("checked") == 'checked'){

                        $(this).attr("checked", false);

                        $(this).prop("checked", false);

                        n--;

                    }else{

                        $(this).attr("checked", true);

                        $(this).prop("checked", true);

                        n++;

                    }

                });

                allIsChecked();

            });

            function allIsChecked(){

                if(n == len){

                    $all.attr('checked', true);

                    $all.prop('checked', true);

                }else{

                    $all.attr('checked', false);

                    $all.prop('checked', false);

                }

            }

        })

    </script>

</body>

</html>

jQuery 全选和反选demo的更多相关文章

  1. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

  2. Jquery 全选、反选问题解析

    最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...

  3. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  4. jQuery全选与反选，且解决点击只执行一次的问题

    <html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript ...

  5. Jquery 全选、反选

    jQuery 1.9以后用 prop(); 不用attr 等 $(function() { $('#inputCheck').click(function() { $("input[name ...

  6. jQuery全选、反选、全不选

    原文链接:https://yq.aliyun.com/articles/33443 HTML内容部分: <ul id="items"> <li> <l ...

  7. jQuery 全选 正反选

    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript&quo ...

  8. 基于jquery 全选、反选、各行换色、单击行选中事件实现代码

    <script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...

  9. Jquery 全选、反选问题的记录

    <div id="list"> <ul id="choseList" > <li><input type=" ...

随机推荐

  1. Java回调实现异步

    在正常的业务中使用同步线程,如果服务器每处理一个请求,就创建一个线程的话,会对服务器的资源造成浪费.因为这些线程可能会浪费时间在等待网络传输,等待数据库连接等其他事情上,真正处理业务逻辑的时间很短很短 ...

  2. Redis 高可用之哨兵模式（二）

    上一篇实际操作过程中遇到两个问题 问题一:虽然运行了3个sentinel容器,实际上只有一个sentinel运行 问题出现的原因很简单,三个sentinel用的是同一个挂载配置文件,容器内部的更改直接 ...

  3. Linux cat命令详解（连接文件并打印到标准输出设备上）

    cat:连接文件并打印到标准输出设备上 一.命令格式: cat [-AbeEnstTuv] [--help] [--version] filename 二.参数说明: -n 或 --number:由 ...

  4. Django框架——基础之模型系统（ORM相关操作）

    ------------恢复内容开始------------ 1.必定会的十三条! 1.1记忆方法一:(按字母顺序记忆)   <1> all(): 查询所有结果 <2> cou ...

  5. Java 从无类型参数Map到有类型参数Map传值的一个问题

    import java.util.HashMap; import java.util.Map; public class MapTest { public static void main(Strin ...

  6. linux命令详解——vim

    显示行号:命令模式下set nu 定位到指定行: 命令模式下,:n   比如想到第2行,:2 编辑模式下,ngg  比如想到第5行 5gg(或者5G) 打开文件定位到指定行   vim  +n  te ...

  7. shell脚本if判断语句报错[: too many arguments的两种原因

    shell脚本,if判断语句报错[: too many arguments 我遇到过两种情况: 1.第一中情况就是网上大家说的,字符串变量中可能存在空格,shell解析时将其认为是多个参数,再进行判断 ...

  8. 微信公众号开发者中心配置 Token验证失败 终极解决方案

    请您检查这几项: 1. 在您的URL(服务器地址)页面里,直接Get获取echostr参数打印到页面上. 在火狐浏览器里Firebug里面看到echostr前面多了几个乱码. 把您开发者设置的URL页 ...

  9. mysql 存储过程（二）

    存储过程(Stored Procedure): 一组可编程的函数,是为了完成特定功能的SQL语句集,经编译创建并保存在数据库中,用户可通过指定存储过程的名字并给定参数(需要时)来调用执行. 优点(为什 ...

  10. Linux系统服务器 GNU Bash 环境变量远程命令执行漏洞修复命令

    具体方法就是在ssh上执行 yum update bash 完成后重启VPS.