Customizable Lable-style Radio Buttons - jQuery Radiocharm

Radiocharm is a jQuery plugin to enhance & beautify the regular radio button that allows custom labels, icons, styles for each status of (un)checked inputs.

See also:

• Nice Checkbox And Radio Button Replacement Plugin - nicelabel.js
• jQuery Plugin To Turn Radio Buttons & Checkboxes Into Labels - zInput
• jQuery Plugin For Labeled Checkbox and Radio Button - Labelauty

How to use it:

1. Include jQuery JavaScript library together with the jQuery RadioCharm plugin's files on the web page as follows:

<link href="jquery-radiocharm.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-radiocharm.js"></script>

2. Include Font Awesome Iconic Font for custom check icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Create the normal radio inputs and specify the label text in the data-radiocharm-label attribute:

<input checked data-radiocharm-label="HTML5"type="radio">
<input data-radiocharm-label="CSS 3"type="radio">
<input data-radiocharm-label="Chrome"type="radio">

4. Attach the plugin to the radio inputs and done.

$('input:radio').radiocharm();

5. Replace the default check/uncheck icons.

<input checked 
       data-radiocharm-label="HTML5" 
       data-radiocharm-icon="html5" 
       type="radio">
<input data-radiocharm-label="CSS 3" 
       data-radiocharm-icon="css3" 
       type="radio">
<input data-radiocharm-label="Chrome" 
       data-radiocharm-icon="chrome" 
       type="radio">

6. Change the default background color & text color of the labels.

<input checked 
       data-radiocharm-background-color="3498DB" 
       data-radiocharm-text-color="FFF" 
       data-radiocharm-label="HTML5"
       type="radio">
<input data-radiocharm-label="CSS 3" 
       data-radiocharm-background-color="F1C40F" 
       data-radiocharm-text-color="FFF" 
       type="radio">
<input data-radiocharm-label="Chrome" 
       data-radiocharm-background-color="C0392B" 
       data-radiocharm-text-color="FFF" 
       name="default_background" 
       type="radio">

7. If you want to allow radio inputs to be uncheckable.

$('input:radio').radiocharm({
  'uncheckable': true
});

---

This awesome jQuery plugin is developed by TetrisSmalls. For more Advanced Usages, please check the demo page or visit the official website.