jQuery.checkradios

A lightweight jQuery Plugin that allows you to use CSS to style checkboxes and radios without using images.

Default Setup

HTML:
<input type="checkbox" class="checkradios" checked/>
<input type="radio" class="checkradios" checked/>
             
Javascript:
$('.checkradios').checkradios();
            
Output:

Custom Styles

HTML:
<input type="checkbox" class="checkradios custom-style" checked/>
<input type="radio" class="checkradios custom-style" checked/>
             
CSS:
.custom-style{
    
    font-size:25px;
    color:#FF0084;
    border:2px solid#FF0084;
    
    -webkitbox-shadow:inset 0px 0.1em 0.1em rgba(0,0,0,0.3);
    -moz-box-shadow:inset 0px 0.1em 0.1em rgba(0,0,0,0.3);
    box-shadow:inset 0px 0.1em 0.1em rgba(0,0,0,0.3);
	
}
             
Javascript:
$('.checkradios').checkradios();
            
Output:

Custom Icons (FontAwesome):

HTML:
<input type="checkbox" class="checkradios custom-style" checked/>
<input type="radio" class="checkradios custom-style" checked/>
             
Javascript
$('.checkradios').checkradios({
	
    checkbox: {
    
       iconClass:'fa fa-check-circle'
    
    },
    
    radio: {
    
       iconClass:'fa fa-star'
    
    }


});
            
Output:

Callback Example:

HTML:
<input id="callback-checkbox" type="checkbox" class="custom-style" checked/>

<div class="status">Status will appear here</div>
             
Javascript
$('#callback-checkbox').checkradios({
	
    onChange: function(checked){
    
    
        if(checked){
          
           $('.status').html('Checked').css('color', 'green');
        
        }else{
        
           $('.status').html('Not Checked').css('color', 'red');
        
        }
    
    
    }


});
            
Output:
Status will appear here

Radio Group:

Output:

If this plugin has helped you or saved you time, please consider buying me a coffee to help fuel further web development projects and to maintain this one. You can Donate Here

Thank You