Custom Radio Button

Step 1: Add this Jquery function

function xRadio(tgt) {
    $(tgt + ' input:radio').each(function(e) {
        if (!$(this).parent().hasClass('xRadio')) {
            $(this).fadeTo(0, 0).wrap('<div class="xRadio" style="position:relative;" />');
            $(this).css({
                'position': 'absolute',
                'width': '100%',
                'height': '100%',
                'left': '0',
                'top': '0',
                'z-index': '10'
            });
            if ($(this).is(':checked')) {
                $(this).parent().addClass('checked');
            }
            $(this).on('change', function() {
                var nam = $(this).attr('name');
                if ($(this).is(':checked')) {
                    $('input:radio[name="' + nam + '"]').parent(".xRadio").removeClass('checked');
                    $(this).parent().addClass('checked');
                }
            });
            $(this).parent().next('label').on('click', function() {
                $(this).prev().find('input:radio').trigger('click');
            });
        }
    });
}

 

Step 2: Add this default css  Continue reading “Custom Radio Button”

Advertisements