按钮图标

jQuery+css3单选框复选框美化效果

阿里云

这是一款使用 jQuery 和 css3 制作的单选框和复选框美化效果的插件。该美化效果插件代码小巧简洁,最为显眼的效果是复选框选中时小勾的旋转效果。

HTML 代码

  1. <div class="wrapper">
  2.     <ul>
  3.         <li><p>Gender:</p></li>
  4.         <li><input type="radio" name="radio-btn" />Male</li>
  5.         <li><input type="radio" name="radio-btn" />Female</li>
  6.     </ul>
  7.     <ul>
  8.         <li><p>Favorite music:</p></li>
  9.         <li>
  10.             <input type="checkbox" name="check-box" /> <span>Pop music</span>
  11.         </li>
  12.         <li>
  13.             <input type="checkbox" name="check-box" /> <span>Rock music</span>
  14.         </li>
  15.         <li>
  16.             <input type="checkbox" name="check-box" /> <span>Rap music</span>
  17.         </li>
  18.         <li>
  19.             <input type="checkbox" name="check-box" /> <span>Hiphop music</span>
  20.         </li>
  21.     </ul>
  22. </div>
也想出现在这里?联系我们
创客主机

使用 jQuery 切换动画效果,引入 jQuery 文件。

  1. <script src='http://libs.useso.com/js/jquery/1.11.0/jquery.min.js'></script>
  2. $('input[name="radio-btn"]').wrap('<div class="radio-btn"><i></i></div>');
  3. $(".radio-btn").on('click', function () {
  4.     var _this = $(this),
  5.         block = _this.parent().parent();
  6.     block.find('input:radio').attr('checked', false);
  7.     block.find(".radio-btn").removeClass('checkedRadio');
  8.     _this.addClass('checkedRadio');
  9.     _this.find('input:radio').attr('checked', true);
  10. });
  11. $('input[name="check-box"]').wrap('<div class="check-box"><i></i></div>');
  12. $.fn.toggleCheckbox = function () {
  13.     this.attr('checked', !this.attr('checked'));
  14. }
  15. $('.check-box').on('click', function () {
  16.     $(this).find(':checkbox').toggleCheckbox();
  17.     $(this).toggleClass('checkedBox');
  18. });

详细信息:http://codepen.io/ElmahdiMahmoud/pen/JFejy

jQuery+css3 单选框复选框美化效果

已有 458 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!