<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form method="post" action="send.php"> <div class="radio-group"> <div class='radio text-center' data-value="Gurgaon">Sultana</div> <div class='radio text-center' data-value="Jalandhar">Hazaribag</div> <div class='radio text-center' data-value="Ranchi">Ranchi</div> <div class='radio text-center' data-value="Delhi">Delhi</div> <div class='radio text-center' data-value="Noida">Noida</div> <div class='radio text-center' data-value="Mumbai">Mumbai</div> <div class='radio text-center' data-value="Bengaluru">Bengaluru</div> <div class='radio text-center' data-value="Hyderabad">Hyderabad</div> <div class='radio text-center' data-value="Pune">Pune</div> <div class='radio text-center' data-value="Faridabad">Faridabad</div> <div class='radio text-center' data-value="Navi Mumbai">Navi Mumbai</div> <div class='radio text-center' data-value="Patna">Patna</div> <br/> <div class="form-group"> <input type="text" class="form-control" id="radio-value" name="radio-value" /> </div> </div> </form> </div> <script> $('.radio-group .radio').click(function(){ $(this).parent().find('.radio').removeClass('selected'); $(this).addClass('selected'); var val = $(this).attr('data-value'); //alert(val); $(this).parent().find('input').val(val); }); </script>

.radio-group{ position: relative; } .radio{ display:inline-block; width: 12%; line-height: 7.4; margin-bottom: 15px; margin-right: 15px; border-radius: 100%; background-color: #dedede; border: 4px solid #dedede; cursor:pointer; } .radio.selected{ border-color: #4d565f; background: #4d565f; color: #fff; line-height: 7; }