Checkbox2Button Demo View on GitHub

Checkbox2Button converts checkbox inputs and radio inputs into user friendly buttons

Checkbox2Button requires jQuery 2.2.4 or higher, and supports Bootstrap 3.3.7 or Bootstrap 4.0

Usage

To use this plugin, simply add the following code to your <head> (you may wish to put the JS in your page footer for performance reasons):

<link rel="stylesheet" href="https://cdn.rawgit.com/InventPartners/Checkbox2Button/master/css/checkbox2button.css" /> 
<script src="https://cdn.rawgit.com/InventPartners/Checkbox2Button/master/js/checkbox2button.min.js"></script>

Then simply add a class of "checkbox2button" to any checkbox / form-check div which you wish to convert to a button. See examples below.

Bootstrap V 3.3.7

Checkboxes

<div class="checkbox checkbox2button">
	<label>
		<input type="checkbox" name="checkbox1" value="1"> Checkbox 1
	</label>
</div>

<div class="checkbox checkbox2button">
	<label>
		<input type="checkbox" name="checkbox2" value="1"> Checkbox 2
	</label>
</div>

<div class="checkbox checkbox2button">
	<label>
		<input type="checkbox" name="checkbox3" value="1" checked> Checkbox 3
	</label>
</div>

Radio Buttons

<div class="checkbox checkbox2button">
	<label>
		<input type="radio" name="radio1" value="1"> Option 1
	</label>
</div>

<div class="checkbox checkbox2button">
	<label>
		<input type="radio" name="radio1" value="2"> Option 2
	</label>
</div>

Select

<select name="select1" class="form-control checkbox2button">
	<option value="yes">Yes</option>
	<option value="no" selected>No</option>
	<option value="maybe">Maybe</option>
</select>

Bootstrap V 4.0

NOTE: If you are using this plugin with Bootstrap v4.0, you will need to provide your own glyphicons for the button icons.

Checkboxes

<div class="form-check checkbox2button">
	<input type="checkbox" id="exampleCheck1" name="checkbox1" value="1"> 
	<label class="form-check-label" for="exampleCheck1">Checkbox 1</label>
</div>

<div class="form-check checkbox2button">
	<input type="checkbox" id="exampleCheck2" name="checkbox2" value="1">
	<label class="form-check-label" for="exampleCheck2">Checkbox 2</label>
</div>

<div class="form-check checkbox2button">
	<input type="checkbox" id="exampleCheck3" name="checkbox3" value="1" checked> 
	<label class="form-check-label" for="exampleCheck3">Checkbox 3</label>
</div>

Radio Buttons

<div class="form-check checkbox2button">
	<input type="radio" id="exampleRadio1" name="radio1" value="1"> 
	<label class="form-check-label" for="exampleRadio1">Option 1</label>
</div>

<div class="form-check checkbox2button">
	<input type="radio" id="exampleRadio1" name="radio1" value="1">
	<label class="form-check-label" for="exampleRadio1">Option 2</label>
</div>

Select

<select name="select1" class="form-control checkbox2button">
	<option value="yes">Yes</option>
	<option value="no" selected>No</option>
	<option value="maybe">Maybe</option>
</select>