Radio Buttons

by someprimetime

HTML

<form action="" class="js-radio-buttons">
    <label id="adventure"><i>Check</i>
        <input type="radio" name="category" value="english" />English</label>
    </span>
</form>

CSS

label {
    cursor: pointer;
    padding-left: 25px;
}
span {
    position: relative;
}
input {
    position: absolute;
    overflow: hidden;
    left: 5px;
    visibility: hidden;
}
.english-ico {
    height: 23px;
    padding-top: 6px;
    width: 18px;
    z-index: 100;
}
.checked {
    background: url(http://www.ijustlearned.com/img/global/icon_sprite.png) no-repeat -5px -869px!important;
    height: 23px;
    padding-top: 5px;
    width: 23px;
}

JavaScript

(function ($) {
    var radioButtons = {
        init: function () {
            this.each(function () {
                var $container = $(this);
                var $radioBtn = $container.find(':radio');

                $radioBtn.on('click', $radioBtn, function (evt) {
                    var $radio = $(evt.target);
                    var $label = $radio.parent('label');
                    var $icon = $label.find('i');

                    $icon.text('Checked');
                    $radio.click();
                });
            });
        } /* end init */
    }
    $.fn.radioButtons = radioButtons.init
})(jQuery);

$(function () {
    $('.js-radio-buttons').radioButtons();
});