<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"> <div class="btn-group" role="group" aria-label="basic label"> <p class="help-block">Radio button (on/off): </p> </div> <div class="btn-group btn-group-xs" role="group" aria-label="..."> <a id="btnOn" href="javascript:;" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span></a> <a id="btnOff" href="javascript:;" class="btn btn-danger active"><span class="glyphicon glyphicon-remove"></span></a> </div> <input type="radio" name="menucolor" value="navbar-default" checked> <input type="radio" name="menucolor" value="navbar-inverse"> </div> </div>

input[type=radio][name="menucolor"] { display: none; } #btnOn .glyphicon-ok { opacity: 0; }

$('[id^="btnO"]').click(function() { var notchecked = $('input[type="radio"][name="menucolor"]').not(':checked'); $('.navbar.'+notchecked.val()).toggleClass('navbar-default navbar-inverse'); notchecked.prop("checked", true); $(this).parent().find('a').each(function() { if($(this).attr('id') == 'btnOn'){ $(this).toggleClass('active btn-success btn-default'); } else { $(this).toggleClass('active btn-danger btn-default'); } }); doChange(notchecked); }); $('input[type="radio"][name="menucolor"]').change(function() { doChange(this); }); function doChange(object){ if($(object).val() == "navbar-default"){ $('#btnOn').removeClass('active'); $('#btnOn .glyphicon-ok').css('opacity','0'); $('#btnOff .glyphicon-remove').css('opacity','1'); $('#btnOff').focus(); } if($(object).val() == "navbar-inverse"){ $('#btnOff').removeClass('active'); $('#btnOff .glyphicon-remove').css('opacity','0'); $('#btnOn .glyphicon-ok').css('opacity','1'); $('#btnOn').focus(); } }