jQuery如何完成全选、不选与反选技巧？（代码详细说明）
时间：2024/5/14作者：未知来源：争怎路由网人气：
- 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。本篇文章给大家带来的内容是介绍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如何实现全选、不选和反选功能？（代码详解）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：jQuery如何完成全选、不选与反选技巧？（代码详细说明）