这是一款简洁的jQuery和css3单选框复选框美化效果。
HTML
<div class="wrapper"> <ul> <li><p>Gender:</p></li> <li><input type="radio" name="radio-btn" />Male</li> <li><input type="radio" name="radio-btn" />Female</li> </ul> <ul> <li><p>Favorite music:</p></li> <li> <input type="checkbox" name="check-box" /> <span>Pop music</span> </li> <li> <input type="checkbox" name="check-box" /> <span>Rock music</span> </li> <li> <input type="checkbox" name="check-box" /> <span>Rap music</span> </li> <li> <input type="checkbox" name="check-box" /> <span>Hiphop music</span> </li> </ul> </div>
使用jQuery切换动画效果
引入jQuery文件。
<script src='http://libs.useso.com/js/jquery/1.11.0/jquery.min.js'></script>
$('input[name="radio-btn"]').wrap(''); $(".radio-btn").on('click', function () { var _this = $(this), block = _this.parent().parent(); block.find('input:radio').attr('checked', false); block.find(".radio-btn").removeClass('checkedRadio'); _this.addClass('checkedRadio'); _this.find('input:radio').attr('checked', true); }); $('input[name="check-box"]').wrap(''); $.fn.toggleCheckbox = function () { this.attr('checked', !this.attr('checked')); } $('.check-box').on('click', function () { $(this).find(':checkbox').toggleCheckbox(); $(this).toggleClass('checkedBox'); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!