jQuery如何实现全选、不选和反选功能？（代码详解）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery如何实现全选、不选和反选功能？（代码详解），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2187字，纯文字阅读大概需要4分钟。
内容图文
本篇文章给大家带来的内容是介绍jQuery实现全选、不选和反选功能的方法（代码详解） 。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。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>
<p 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>
</p>
<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如何实现全选、不选和反选功能？（代码详解）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的jQuery如何实现全选、不选和反选功能？（代码详解）全部内容，希望文章能够帮你解决jQuery如何实现全选、不选和反选功能？（代码详解）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】