jQuery结合Font Awesome字体图标实现全选、不选和反选功能

Font Awesome字体图标链接地址：http://www.fontawesome.com.cn/faicons/

效果：

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />

    <style type="text/css">

        label {

            display: inline-flex;

            display: -webkit-inline-flex;

            position: relative;

            cursor: pointer;

            width: 6%;

        }

        .box {

            cursor: pointer;

            width: 16px;

            height: 16px;

            appearance: none;

            -webkit-appearance: none;

            -moz-appearance: none;

            border: 1px solid lightblue;

            background: lightblue;

        }

        .fa-check {

            position: absolute;

            top: 3px;

            left: 2px;

            color: #fff;

            border: none;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <label>

			<input type="checkbox" class="box"/>

			<span class="remeber">

				香蕉

			</span>

			<i class="fa fa-fw"></i>

		</label>

        <label class="wrapper">

			<input type="checkbox" class="box" />

			<span class="remeber">

				苹果

			</span>

			<i class="fa fa-fw"></i>

		</label>

        <label class="wrapper">

			<input type="checkbox" class="box"/>

			<span class="remeber">

				西瓜

			</span>

			<i class="fa fa-fw"></i>

		</label>

        <label class="wrapper">

			<input type="checkbox" class="box"/>

			<span class="remeber">

				橘子

			</span>

			<i class="fa fa-fw"></i>

		</label>

    </div>

    <br>

    <input type="button" name="" id="check-all" value="全选" />

    <input type="button" name="" id="check-no" value="不选" />

    <input type="button" name="" id="check-reverse" value="反选" />

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(function() {

            $('body').on("click", ".box", function() {

                $(this).parent().find('.fa').toggleClass('fa-check');

            });

            //全选

            $("#check-all").click(function() {

                $(".wrapper label i").each(function() {

                    $(this).addClass("fa-check");

                })

            });

            //不选

            $("#check-no").click(function() {

                $(".wrapper label i").each(function() {

                    $(this).removeClass("fa-check");

                })

            });

            //反选

            $("#check-reverse").click(function() {

                $(".wrapper label i").each(function() {

                    $(this).toggleClass("fa-check");

                })

            });

        })

    </script>

</body>

</html>

　　

jQuery实现全选、不选和反选功能的更多相关文章

  1. jQuery实现全选、全不选、反选

    如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...

  2. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  3. jquery实现全选、反选、不选

    <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...

  4. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  5. jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  6. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. jquery实现全选、全不选、反选、获取选中的所有值总结

    HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html> <html> <head& ...

  8. jQuery实现全选、反选和不选功能

    HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <ul id=&q ...

  9. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  10. （转载）jquery实现全选、反选、获得所有选中的checkbox

    举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...

随机推荐

  1. 三年Linux运维工作总结教训

    Linux运维一定要知道的六类好习惯和23个教训,避免入坑! 从事运维三年半,遇到过各式各样的问题,数据丢失,网站挂马,误删数据库文件,黑客攻击等各类问题. 今天简单整理一下,分享给各位小伙伴. 一. ...

  2. 电话面试问答Top 50 --[伯乐在线]

    今年是2015年,在过去几年中,电面(电话面试)是筛选程序员职位候选人的最流行的方式.它让雇佣双方很容易互相了解对方,候选人不需要去未来雇主的所在地,面试官也不用做额外的安排.这是我介绍程序员面试问题 ...

  3. 如何提高Ajax性能

    1.适当使用缓存机制 2.使用CDN内容分发来访问Jquery脚本: (1)自己公司架设CDN服务器 (2)使用第三方公司的,比如微软,谷歌等公司的CDN,但有时候不太靠谱 3.JS/CSS文件的打包 ...

  4. Effective C++(10) 重载赋值操作符时，返回该对象的引用（retrun *this）

    问题聚焦: 这个准则比较简短,但是往往就是这种细节的地方,可以提高你的代码质量. 细节决定成败,让我们一起学习这条重载赋值操作符时需要遵守的准则吧. 还是以一个例子开始: Demo // 连锁赋值 x ...

  5. Java学习---Java代码编写规范

    编码规范 1 前言为确保系统源程序可读性,从而增强系统可维护性,java编程人员应具有基本类似的编程风格,兹制定下述Java编程规范,以规范系统Java部分编程.系统继承的其它资源中的源程序也应按此规 ...

  6. 数据链路层 点对点协议 PPP

    点对点协议 PPP 一. PPP 协议应满足的需求 简单.提供不可靠的数据报服务,比IP协议简单,不需要纠错,不需要序号,不需要流量控制. 工作方式:接收方每收到一个帧就进行CRC校验,如正确就接受该 ...

  7. CopyrightHelper—开源VS插件辅助插入版权注释

    前言 有很多时候,我们在写代码的时候需要在代码文件头加上描述和版权信息等,如果使用代码项目模板又得为每种文件定模板,而已不方便,如果从某个地方复制过来,又嫌麻烦... 为了能解决这种懒人的需求,我开始 ...

  8. Monster: half man, half beast and very scary.

    Monster: half man, half beast and very scary. 怪物,半人半兽很吓人.

  9. [EffectiveC++]item15：Provide access to raw resources in resource-managing class

    在资源管理类中提供对原始资源的访问

  10. MVC 入门-MvcMovie

    入门教程 ASP.NET MVC 5 入门 https://docs.microsoft.com/zh-cn/aspnet/mvc/overview/getting-started/introduct ...