前段时间做了一个全选和反选的功能，最近不忙了，做了一个简化版的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. Max History CodeForces - 938E (组合计数)

    You are given an array a of length n. We define fa the following way: Initially fa = 0, M = 1; for e ...

  2. 福建工程学院第十四届ACM校赛G题题解

    外传:编剧说了不玩游戏不行 题意: 有n个石堆,我每次只能从某一堆中取偶数个石子,你取奇数个,我先手,先不能操作的人输.问最后谁能赢. 思路: 这个题仔细想想,就发现,取奇数的人有巨大的优势,因为假设 ...

  3. Codeforces Round #603 F Economic Difficulties

    题目大意 给你两棵树,结点分别是1-A与1-B,然后给了N台设备,并且A树和B树的叶子结点(两棵树的叶子节点数量相同)都是链接电机的.问,最多可以删掉几条边使得每个设备都能连到任意一棵(或两棵)树的根 ...

  4. python：enumerate 函数

    说明 enumerate()是python的内置函数: 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enumerate将其组成一个索引序列,利用它可以同时获得索引和值 多用于 ...

  5. 客户端相关知识学习（三）之Android原生与H5交互的实现

    Android原生与H5交互的实现 H5调用原生的方式 方式可能有多种,根据开发经验,接触过两种方式. 方法一:Android向H5注入全局js对象,也就是H5调Android 1.首先对WebVie ...

  6. css3实现div自动左右动

    <!DOCTYPE html> <meta charset="UTF-8"/> <html> <head> <style> ...

  7. dubbo-admin监控搭建2.6.0版本

    首先介绍一下dubbo的一个比较大的改变,那就是在2.6.1及2.6.1以后的版本当中,dubbo将一分为二,分为Dubbo-RPC和Dubbo-Admin,而在2.6.1以前的版本中Dubbo-Ad ...

  8. 《python解释器源码剖析》第0章--python的架构与编译python

    本系列是以陈儒先生的<python源码剖析>为学习素材,所记录的学习内容.不同的是陈儒先生的<python源码剖析>所剖析的是python2.5,本系列对应的是python3. ...

  9. 简单xml示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...

  10. Java注解demo

    # 为了熟悉了解注解,写的一个小demo# demo的主要功能是扫描一个class中的包含我们自定义注解的方法,然后把他们的返回值放到一个map中 public class QQ { public s ...