前段时间做了一个全选和反选的功能，最近不忙了，做了一个简化版的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. Iterable<T>接口

    https://docs.oracle.com/javase/8/docs/api/java/lang/Iterable.html public interface Iterable<T> ...

  2. 磁盘(disk)结构

  3. CSS media queries 媒体查询

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  4. Linux Exploit系列之二 整数溢出

    整数溢出 虚拟机安装:Ubuntu 12.04(x86) 什么是整数溢出? 存储大于最大支持值的值称为整数溢出.整数溢出本身不会导致任意代码执行,但整数溢出可能会导致堆栈溢出或堆溢出,这可能导致任意代 ...

  5. 利用mybatis-generator自动生成代码（转）

    利用mybatis-generator自动生成代码 mybatis-generator有三种用法:命令行.eclipse插件.maven插件.个人觉得maven插件最方便,可以在eclipse/int ...

  6. Jmeter多接口测试之参数传递

    接口测试包含单接口测试和多接口测试,通过组合多个接口实现一组功能的验证称为多接口测试,单接口重在单个接口多种请求组合的响应断言,多接口重在组合不同接口,实现流程的串联和验证.多接口测试涉及到接口之间参 ...

  7. svn提交报错 解决方法

    1.先clean 2.删除 .lock文件 3.update项目 4.先还原文件,然后update 接着commit

  8. ArrayMatched

    import os from jinja2 import Environment,FileSystemLoader def generateNewLackArray(ArrayList,count,T ...

  9. NFS原理

    1.什么是NFS? 全称 network file system 网络文件系统 通过网络存储和组织文件的一种方法或机制. 什么是文件系统? 2.为什么要用共享存储? 前端所有的应用服务器接收到用户上传 ...

  10. Spring MVC 设置UTF-8编码

    按照需求选其中之一即可吧. 修改读取参数时候的编码: 在web.xml中: 添加一个过滤器(filter),注册 org.springframework.web.filter.CharacterEnc ...