"Switch on off radio button styled glyphicons"
Bootstrap 3.3.0 Snippet by inge1980

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

Questions / Comments:

Related: See More