Tags

, , ,

Step 1: Add this Jquery function

function xCheckbox(tgt){
	$(tgt+' input[type=checkbox]').each(function(){
        if(!$(this).parent().hasClass('xCheckbox')){
                $(this).fadeTo(0,0).wrap('


<div class="xCheckbox" 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(){
                if($(this).is(':checked')){
                    $(this).parent().addClass('checked');
                } else {
                    $(this).parent().removeClass('checked');
                }
            });
        }
    });
}

 

Step 2: Add this default css 

.xCheckbox {
background:#fcfcfc;
width:14px;
height:14px;
border:1px solid #b5bfc4;
float:left;
margin:1px 9px 0 0;
}

.xCheckbox.checked {
border:1px solid #77bd71;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAn0lEQVQ4T2NkoBAwUqifYUAM0AW6+hEQfwS5nlQXGAH17AHieUBcQqoBMM1ngRr9gfgbKQZg1YxugCBQQBqIr6DFDE7N6AZMBArEALEzEF+AGoJXM7oB3ECBzUCsDzWECRpgKH5GTzfosQAzxBGqEBTi8ADDluiwRSPIkENA/AeIQQaBQxsXwJUOuKAa8GomJRpJdgE+V6PIkZqUMQwGAP4BHhHaNoizAAAAAElFTkSuQmCC) no-repeat 0 0;
background-size:100%;
}

 

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

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

 

Click Here To See Working Example

 

Advertisements