Tags

, , ,

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 

.xRadio {
background:#b5bfc4;
border-radius:50%;
width:14px;
height:14px;
float:left;
border:1px solid #b5bfc4;
margin:1px 10px 0 0;
}

.xRadio.checked {
background:#77bd71;
border:1px solid #ccc;
}

 

Step 3: Now you have to call the function to apply custom Radio button

$(function(){
     /* xRadio([parent element class name or id]); */
     xRadio('.CustomEle');
});

 

Click Here To See Working Example

 

Advertisements