<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); }); });