<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <br/> <div class="container"> <div data-toggle="buttons" onClick="console.log(getCurrentState());"> <label id="on" class="btn btn-lg btn-default active on"> <input type="radio" class="checked" name="options" id="option1" autocomplete="off" checked> <i class="fa fa-filter"></i> </label> <label id="off" class="btn btn-lg btn-default "> <input type="radio" class="unchecked" name="options" id="option2" autocomplete="off"> <i class="fa fa-filter"></i> </label> </div> </div>

/* hide the button with the active state */ .btn.active { display: none; } label.on, .btn.active:hover { color: rgb(51, 51, 51); background-color: rgb(230, 230, 230); border-color: rgb(173, 173, 173); background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

function getCurrentState() { var onBtn = document.getElementById('option1'); if(onBtn && onBtn.checked) { return 'on' } else { return 'off' } }