<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="col-xs-3"> <div class="radio-button"> <div class="btn-group"> <ul class="pagination"> <li> <input id="left" type="radio" name="radAnswer" value="Left" checked="checked"/> <a href="#"> <label for="left" class="input-group">Left</label> </a> </li> <li> <input id="middle" type="radio" name="radAnswer" value="Middle" /> <a href="#"> <label for="middle" class="input-group">Middle</label> </a> </li> <li> <input id="right" type="radio" name="radAnswer" value="Right" /> <a href="#"> <label for="right" class="input-group">Right</label> </a> </li> </ul> </div> </div> <input type="button" id="getvalue" value="getvalue"> <input type="text" id="value" class="form-control" placeholder="Click to get the radiobox value"> </div> </div> </div>

.radio-button input[type="radio"]:checked + a { z-index: 2; color: #fff; background-color: #428bca; border-color: #428bca; cursor: default; } .radio-button label { padding: 6px 12px; margin-bottom: 0px; cursor: pointer; } .radio-button .pagination > li > a { padding: 0px; } .radio-button input[type="radio"] { width: 0px; height: 0px; position: absolute; color: transparent; visibility: hidden; }

$().ready(function() { $('#getvalue').click(function() { $('#value').val($('input:radio[name=radAnswer]:checked').val()); }); });