jQuery如何实现全选、不选和反选功能?(代码详解)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍jQuery实现全选、不选和反选功能的方法(代码详解) 。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

jQuery结合Font Awesome字体图标实现全选、不选和反选功能

Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/

效果:

jQuery如何实现全选、不选和反选功能?(代码详解)

代码:

<!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>
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » jQuery如何实现全选、不选和反选功能?(代码详解)

发表评论

提供最优质的资源集合

立即查看 了解详情