jQuery Plugin To Convert Radio Buttons Into Grouped Buttons - radiosforbuttons

Radios For Buttons is a jQuery alternative to the standard Html radio button that converts radio buttons into a series of buttons styling with Bootstrap 2/3.

How to use it:

1. Load the Twitter Bootstrap's CSS in the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

2. Load the latest jQuery library and jQuery radios for buttons plugin in the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.radiosforbuttons.js"></script>

3. Create the radio buttons with color assigning via the data properties.

<div class="colors">
<input type="radio" data-button-color="blue" name="color" value="blue" id="blue">
<label for="blue">blue</label>
<input type="radio" data-button-color="white" name="color" value="white" id="white">
<label for="white">white</label>
<input type="radio" data-button-bootstrap-class="btn-warning" name="color" value="yellow" id="yellow">
<label for="yellow">yellow</label>
<input type="radio" data-button-color="black" name="color" value="black" id="black">
<label for="black">black</label>
<input type="radio" data-button-bootstrap-class="success" name="color" value="green" id="green">
<label for="green">green</label>
<input type="radio" data-button-bootstrap-class="btn-danger" name="color" value="red" id="red">
<label for="red">red</label>
<input type="radio" data-button-color="lightblue" name="color" value="lightblue" id="lightblue">
<label for="lightblue">light blue</label>
</div>

4. Initialize the plugin with one line of javascript.

<script>
$('.colors').radiosforbuttons();
</script>

5. Optional settings.

<script>
$('.colors').radiosforbuttons({
group: true, // grouped buttons
vertical: false, // vertical mode
autowidth: true,
margin: 0, // space between buttons
});
</script>

---

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