This time I will share jQuery Plugin and tutorial about Easy Custom Radio Button Plugin With jQuery – custom-radio, hope it will help you in programming stack.
custom-radio is a minimal jQuery plugin which converts normal radio buttons into inline labels for easier selection.
How to use it:
1. Load the jQuery custom-radio plugin after loading jQuery JavaScript library as follows:
1 |
<script src="//code.jquery.com/jquery-2.2.0.js"></script> |
2 |
<script src="custom-radio.js"></script> |
2. Wrap the default radio buttons into a DIV element.
1 |
<div data-radio-custom> |
2 |
<input type="radio" name="material" value="Steel"> |
3 |
<input type="radio" name="material" value="Silver"> |
4 |
<input type="radio" name="material" value="Gold"> |
3. Initialize the plugin by calling the function on the DIV element.
1 |
$('div[data-radio-custom]').customRadio(); |
4. Style the plugin with your own CSS styles.
04 |
background-color: #DEDEDE; |
13 |
background-color: #17bed0; |
5. Default plugin options.
01 |
$('div[data-radio-custom]').customRadio({ |
This awesome jQuery plugin is developed by mario-iliev. For more Advanced Usages, please check the demo page or visit the official website.
