<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<h2>simple radio switch based only on CSS<br />
<small>inspired by @tonetlds work, but this solution uses :checked state and NOT relay on "active" class added by js to .btn element.</small
</h2>
</div>
<div class="well well-sm text-center">
<h3>Radio:</h3>
<div class="dlk-radio btn-group">
<label class="btn btn-success">
<input name="choices[1]" class="form-control" type="radio" value="1">
<i class="fa fa-check glyphicon glyphicon-ok"></i>
</label>
<label class="btn btn-default">
<input name="choices[1]" class="form-control" type="radio" value="2" defaultchecked="checked">
<i class="fa fa-times glyphicon glyphicon-remove"></i>
</label>
<label class="btn btn-info">
<input name="choices[1]" class="form-control" type="radio" value="3" defaultchecked="checked">
<i class="fa fa-check glyphicon glyphicon-ok"></i>
</label>
<label class="btn btn-warning">
<input name="choices[1]" class="form-control" type="radio" value="4" defaultchecked="checked">
<i class="fa fa-times glyphicon glyphicon-remove"></i> can be labeled
</label>
<label class="btn btn-danger">
<input name="choices[1]" class="form-control" type="radio" value="0" defaultchecked="checked">
<i class="fa fa-check glyphicon glyphicon-remove"></i>
</label>
</div>
</div>
<br />
