这篇文章给大家分享的是有关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> </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实现全选、不选和反选功能的方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。