本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！jQuery如何实现全选、不选和反选功能？（代码详解）
收藏 本篇文章给大家带来的内容是介绍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>
