<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>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Radio select stylized with bootstrap button (no css need)</h2>
<h3>without change style button (JS V1 - change styles on JS, only two styles at a time)</h3>
<div class="form-group">
<label for="happy" class="col-sm-5 col-md-5 control-label text-right">Estado do produto:</label>
<div class="col-sm-7 col-md-7">
<div class="input-group">
<div id="radioBtn" class="btn-group">
<span class="btn btn-primary btn-sm active" data-toggle="estado" data-value="Y">NOVO</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estado" data-value="N">USADO</span>
</div>
<input type="hidden" name="estado" id="estado">
</div>
</div>
</div>
<br><br>
<div class="form-group">
<label for="happy" class="col-sm-5 col-md-5 control-label text-right">Estado do produto:</label>
<div class="col-sm-7 col-md-7">
<div class="input-group">
<div id="radioBtn" class="btn-group">
<span class="btn btn-primary btn-sm active" data-toggle="estadotwo" data-value="Y">NOVO</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadotwo" data-value="N">USADO</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadotwo" data-value="Q">QUEBRADO</span>
</div>
<input type="hidden" name="estadotwo" id="estadotwo">
</div>
</div>
</div>
</div>
<br><br>
<div class='row'>
<h3>With change style button (JS V2 - Change style on HTML with more than two styles at a time)</h3>
<div class="form-group">
<label for="happy" class="col-sm-5 col-md-5 control-label text-right">Estado do produto:</label>
<div class="col-sm-7 col-md-7">
<div class="input-group">
<div id="radioBtnV2" class="btn-group">
<span class="btn btn-success btn-sm active" data-toggle="estadochange" data-value="L" data-active="btn-success" data-notactive="btn-default">.btn-default | .btn-success</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadochange" data-value="D" data-active="btn-danger" data-notactive="btn-default">.btn-default | .btn-danger</span>
</div>
<input type="hidden" name="estadochange" id="estadochange">
</div>
</div>
</div>
<br><br>
<div class="form-group">
<label for="happy" class="col-sm-5 col-md-5 control-label text-right">Estado do produto:</label>
<div class="col-sm-7 col-md-7">
<div class="input-group">
<div id="radioBtnV2" class="btn-group">
<span class="btn btn-warning btn-sm Active" data-toggle="estadochange2" data-value="W" data-active="btn-warning" data-notactive="btn-default">.btn-default | .btn-warning</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadochange2" data-value="I" data-active="btn-info" data-notactive="btn-danger">.btn-danger | .btn-info</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadochange2" data-value="D" data-active="btn-info" data-notactive="btn-default">.btn-default | .btn-info</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadochange2" data-value="L" data-active="btn-link" data-notactive="btn-default">.btn-default | .btn-link</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadochange2" data-value="IN" data-active="btn-warning" data-notactive="btn-info">.btn-info | .btn-warning</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadochange2" data-value="S" data-active="btn-primary" data-notactive="btn-success">.btn-success | .btn-primary</span>
</div>
<input type="hidden" name="estadochange2" id="estadochange2">
</div>
</div>
</div>
<br><br><br><br>
</div>
<div class="row">
<div class="panel panel-info">
<div class="panel-heading"><h2 class="panel-title">How to use:</h2></div>
<div class="panel-body">
You can use this snippet with a normal form and get the returns value using the hidden input.<br>
You can use all the button styles above from Bootstrap has the following classes:<br>
.btn-default<br>
.btn-primary<br>
.btn-success<br>
.btn-info<br>
.btn-warning<br>
.btn-danger<br>
.btn-link<br>
</div>
</div>
Thanks to <a href='http://bootsnipp.com/tonnevillec'>tonnevillec</a>.
</div>
</div>
$(document).ready(function(){
// Use only for V1
$('#radioBtn span').on('click', function(){
var sel = $(this).data('value');
var tog = $(this).data('toggle');
$('#'+tog).val(sel);
// You can change these lines to change classes (Ex. btn-default to btn-danger)
$('span[data-toggle="'+tog+'"]').not('[data-value="'+sel+'"]').removeClass('active btn-primary').addClass('notActive btn-default');
$('span[data-toggle="'+tog+'"][data-value="'+sel+'"]').removeClass('notActive btn-default').addClass('active btn-primary');
});
// Use only for V2
$('#radioBtnV2 span').on('click', function(){
var sel = $(this).data('value');
var tog = $(this).data('toggle');
var active = $(this).data('active');
var classes = "btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link";
var notactive = $(this).data('notactive');
$('#'+tog).val(sel);
$('span[data-toggle="'+tog+'"]').not('[data-value="'+sel+'"]').removeClass('active '+classes).addClass('notActive '+notactive);
$('span[data-toggle="'+tog+'"][data-value="'+sel+'"]').removeClass('notActive '+classes).addClass('active '+active);
});
});
