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

这是一款简洁的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');
});
                

更多详细信息请参看：http://codepen.io/ElmahdiMahmoud/pen/JFejy