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. 我的MBTI小测试

    今天做了自己的MBTI测试,选了93道题版本的,测试结果是ESFP表演者型——有我在就有笑声.这个测试很有趣,我也觉得很神奇. 一.我的MBTI图形 二.才储分析:我的性格类型倾向为“ ESFP ”( ...

  2. spring boot(6)-JdbcTemplate访问数据库

     pom.xml 添加jdbc模块和mysql依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...

  3. org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/JJ]]

    1. 如果webapps下有同名的文件,会出现以上错误: 2.解决办法: 查看项目的目录结构是否正确,对于servlet项目,WEB-INF下应该有一个classes目录,存放编译好的.class文件 ...

  4. 沉淀再出发:PHP的中级内容

    沉淀再出发:PHP的中级内容 一.前言     前面我们介绍了PHP的简单的语法知识以及相关的用法,接下来我们将PHP+mysql以及PHP+ajax结合起来进行研究. 二.PHP+mysql     ...

  5. laravel controller重写

    <?php namespace Boss\Http\Controllers; use Illuminate\Foundation\Bus\DispatchesJobs; use Illumina ...

  6. C/S架构的性能测试

    很多人关心LR在C/S架构上如何实施性能测试,我想根本原因在于两个方面,一是很多时候脚本无法录制,即LR无法成功调用被测的应用程序,二是测试脚本即使录制下来,可读性不强,往往不能运行通过,调试时无从下 ...

  7. Homebrew 安装 MySQL

    安装 Homebrew brew doctor 确认 brew 在正常工作 brew update 更新包 brew install mysql 安装 MySQL ​ ==> Downloadi ...

  8. java继承-静态绑定和动态绑定

    静态绑定和动态绑定: 静态:程序执行前方法已经被绑定,针对java简单可以理解为程序编译器已的绑定(静态绑定)java当中的方法是final.static.private构造方法都是前期绑定 动态:运 ...

  9. h5标签

    1.<abbr> 标签指示简称或缩写,比如 "WWW" 或 "NATO". IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标 ...

  10. 学习python第二天数据库day1

    day01: 关键字:desc 作用:查看表结构(字段名,数据类型&长度) 举例: desc python1808_laoguo; 追加数据到表中:(新增操作) 关键字:insert into ...