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