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. Example of assigning attributes directly to an object name

    Student类 package com.itheima_05; /* * 学生类 * * 通过对象直接访问成员变量,会存在数据安全问题 * 这个时候,我们就想能不能不让外界的对象直接访问成员变量呢? ...

  2. 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)

    问题描述: 有时候使用 apt-get 终端提示这样的错误信息: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/ ...

  3. Oracle 11g 管理工具及SQL Deverloper 的使用教程

    Oracle 管理工具及SQL Deverloper 的使用教程 默认的网站的管理工具 网址格式:https://机器名:1158/em 默认:https://localhost:1158/em 机器 ...

  4. 有关使用 iview 表单验证的问题

    Vue的UI解决框架,element-UI, iview-UI 有关表单验证使用的是同一个插件,async-validator,有关这个插件的用法就不做赘述,但是在iview表单的使用中可能会用到验证 ...

  5. c# 设计模式 之：工厂模式之---简单工厂

    1.uml类图如下: 具体实现和依赖关系: 实现:SportCar.JeepCar.HatchbackCar 实现 Icar接口 依赖: Factory依赖 SportCar.JeepCar.Hatc ...

  6. Scratch3.0——克隆代码仓库的正确姿势

    原文地址:https://blog.csdn.net/weiwoyonzhe/article/details/86603450 对Scratch3.0进行二次开发,首先要在github上fock官方代 ...

  7. Visual Staudio 2015 打开指定文件，定位到指定文件目录下

    Visual Staudio 2015 项目定位文件位置 每次使用的Visual Staudio 2015 写代码的时候总是打开了.cs文件或xaml文件时, 还要手动去找该 文件位置,每次都要翻好大 ...

  8. Python实例---简单的选课系统

    要求 思路: 构造方法传递过去学校名称,同时利用UUID创建一个随机字符串,用这个字符串来作为要写入的文件名 利用类的__str__方法来实现类对象接口返回学校名称的操作 利用pickle的dumps ...

  9. 期初付年金（annuity-due）

    含义:在 n 个时期,每个时期初付款1元. ——期初付年金的现值因子 ——期初付年金的积累值因子 关系: 二.期初付年金和期末付年金的关系

  10. GO语言 切片的缩短和增长原理

    package main import "fmt" //import OS "os" //import "strings" //import ...