前段时间做了一个全选和反选的功能，最近不忙了，做了一个简化版的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. js跳转页面的方法

    js跳转页面的几种方法 第一种:(跳转到b.html) <script language="javascript" type="text/javascript&qu ...

  2. Lock Puzzle CodeForces - 936C (构造)

    大意: 给定字符串$s$,$t$, 每次操作可以将$S=AB$变为$S=B^RA$, 要求$3n$次操作内将$s$变为$t$. #include <iostream> #include & ...

  3. hive报错java.sql.SQLException: null, message from server: "Host '192.168.126.100' is not allowed to connect to this MySQL server"

  4. Go项目目录管理

    在Go的官网文档How to Write Go Code中,已经介绍了Go的项目目录一般包含以下几个: src 包含项目的源代码文件: pkg 包含编译后生成的包/库文件: bin 包含编译后生成的可 ...

  5. SSH中直接运行php文件

    cd /home/afish/domains/afish.cnblogs.com/public_htmlphp locoy_im_folder.php php locoy_im.php

  6. 【hdu 6155】Subsequence Count

    题意 给定一个 \(01\) 串 \(S_{1...n}\) 和 \(Q\) 个操作. 操作有 \(2\) 种类型: 1. 将 \([l,r]\) 区间所有数取反(\(0→1,\space 1→0\) ...

  7. qt中不能编辑

    下载的qt代码不能编辑,原因是文本编码是GB2312,现在选择的是utf-8,把编码改过来就可以编辑了

  8. 树上倍增求LCA详解

    LCA(least common ancestors)最近公共祖先 指的就是对于一棵有根树,若结点z既是x的祖先,也是y的祖先(不要告诉我你不知道什么是祖先),那么z就是结点x和y的最近公共祖先. 定 ...

  9. 数字转化为汉字，如5->五

    //数字转化为汉字 如5-->五-(NSString*)translation:(NSString *)arebic{   NSString *str = arebic;    NSArray ...

  10. Spring整合Hibernate实现Spring Data JPA （简单使用）

    直接上代码: pom.xml <!-- hibernate start --> <!-- spring data jpa --> <dependency> < ...