<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>btn-group selected value to input element value</h2> </div> <div class="row"> <label for="DELIVERY_INTERVAL" class="col-xs-3 control-label" >Selected DELIVERY INTERVAL value</label> <input type="text" class="form-control col-xs-9" id="DELIVERY_INTERVAL"/> </div> <div class="row"> <div class="form-group col-xs-12"> <label for="DELIVERY_INTERVAL" class="col-xs-12 col-md-3 control-label" >Select delivery time</label> <div class="col-xs-12 input-group DELIVERY_INTERVAL"> <div class="btn-group btn-group-justified" role="group" > <div class="btn-group" role="group"> <button type="button" class="btn btn-default defaultvalue" value="any">Any time</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="08-11">08-11</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="11-13">11-13</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="13-16">13-16</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="16-19">16-19</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="19-22">19-22</button> </div> </div> </div> </div> </div> <div class="row"> <label for="PICKUP_INTERVAL" class="col-xs-3 control-label" >Selected PICKUP INTERVAL value</label> <input type="text" class="form-control col-xs-9" id="PICKUP_INTERVAL"/> </div> <div class="row"> <div class="form-group col-xs-12"> <label for="PICKUP_INTERVAL" class="col-xs-12 col-md-3 control-label" >Select pickup time</label> <div class="col-xs-12 input-group PICKUP_INTERVAL"> <div class="btn-group btn-group-justified" role="group" > <div class="btn-group" role="group"> <button type="button" class="btn btn-default defaultvalue" value="any">Any time</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="08-11">08-11</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="11-13">11-13</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="13-16">13-16</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="16-19">16-19</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" value="19-22">19-22</button> </div> </div> </div> </div> </div> <div class="row"> <h2>DESCRIPTION</h2> <p>This snippet pre-toggle first value in btn-group and set value for input element equal to selected button value, and then you can use this value for posting in basic forms</p> <p>IMPORTANT: You must set ID for input element equal to input-group CLASS (in my case it was PICKUP_INTERVAL and other group named DELIVERY_INTERVAL) then you can initialize it in <pre>$(document).ready(function(){ BtnGroup('DELIVERY_INTERVAL'); BtnGroup('PICKUP_INTERVAL'); })</pre></p> </div> </div>

$(document).ready(function(){ BtnGroup('DELIVERY_INTERVAL'); BtnGroup('PICKUP_INTERVAL'); function BtnGroup(divid) { $('.'+divid+' button').first().attr("aria-pressed","true"); $('.'+divid+' button').first().addClass("active"); $('#'+divid).attr('value',$('.'+divid+' button.active').val()); $('.'+divid+' button').click(function() { $('.'+divid+' button').attr("aria-pressed","false"); $('.'+divid+' button').removeClass("active"); $(this).attr("aria-pressed","true"); $(this).addClass("active"); $('#'+divid).attr('value',$('.'+divid+' button.active').val()); }); } });