Bootstrap Snippet Use div as radio button using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Use div as radio button "
Bootstrap 4.1.1 Snippet by mdwaris198

Related: See More

Questions / Comments:

"Use div as radio button " Bootstrap 4.1.1 Snippet by mdwaris198

Related: See More

Questions / Comments:

"Use div as radio button "
Bootstrap 4.1.1 Snippet by mdwaris198