Price Change With Radio Button In Bootstrap

File Size:1.26 KB
Views Total:320
Last Update:December 27, 2017
Publish Date:December 27, 2017
Official Website:Go to website
License:MIT

In this tutorial based on bootstrap with radio button on click change price. we are showing on click radio button with same time change price with multiple radio button. as this design showing with multiple bootstrap radio button click change multiple numbers with use a little bit jQuery  with modify design in css3.

How It Use :

1.  Use and include the files into your Bootstrap install path :

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="Js/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2.  Create a Bootstrap dropdown with use data-level attribute to specify the data level search for each list item :

<div class="col-md-12 col-sm-12 col-xs-12 text-center">

<div class="course-price">
<div id="course1Div" class="">10$/Year</div>
<div id="course2Div" class="none">30$/Year</div>
<div id="course3Div" class="none">50$/Year</div>
<div id="course4Div" class="none">40$/Year</div>
<div id="course5Div" class="none">20$/Year</div>
</div>

<div style="border: 1px solid #ddd;border-radius: 25px;">
   <div class="btn-group button-group" data-toggle="buttons">
        <label class="btn btn-default radio-label active">
          <input type="radio" name='thing' value='valuable' id="course1" style="display: none;" />
        </label> 
      <label class="btn btn-default radio-label">
         <input type="radio" name='thing' value='valuable' id="course2" style="display: none;"/>
      </label> 
      <label class="btn btn-default radio-label">
        <input type="radio" name='thing' value='valuable' id="course3" style="display: none;"/>
      </label> 
      <label class="btn btn-default radio-label">
        <input type="radio" name='thing' value='valuable' id="course4" style="display: none;"/>
      </label> 
      <label class="btn btn-default radio-label" style="margin-right: 0px;">
        <input type="radio" name='thing' value='valuable' id="course5" style="display: none;"/>
      </label> 
  </div>
</div>
<div>
  <ul class="list-inline course-list">
  	 <li>Course 1</li>
  	 <li>Course 2</li>
  	 <li>Course 3</li>
  	 <li>Course 4</li>
  	 <li>Course 5</li>
  </ul>

</div>

<div class="col-md-12">
<div class="descr" id="course1MyDiv" >madroid is favored by homeowners nationwide, because it helps minimize vacancies, evictions and damages. Tenants love madroid, too, as they save on hefty application fees and broker’s commissions.
</div>
<div class="descr none" id="course2MyDiv" >course 2 is favored by homeowners nationwide, because it helps minimize vacancies, evictions and damages. Tenants love madroid, too
</div>
<div class="descr none" id="course3MyDiv" >course3 is favored by homeowners nationwide, because it helps minimize vacancies, evictions and damages.
</div>
<div class="descr none" id="course4MyDiv" >course4 is favored by homeowners nationwide, because it helps minimize vacancies, evictions and damages. Tenants love madroid, too, as they save on hefty application fees and broker’s commissions.
</div>
<div class="descr none" id="course5MyDiv" >course5 is favored by homeowners nationwide, because it helps minimize vacancies, evictions and damages. Tenants love madroid, too, as they save on hefty application fees and broker’s commissions.
</div>
</div>

3. Use Desgin Code CSS :

.none { display:none; }

.course-list li {float: left;margin-right: 13%;    font-weight: 600;}
.course-list li:last-child{margin-right: 0px;}
.course-price {    
	background-color: #f5a623;
    display: inline-block;
    padding: 13px 33px;
    font-size: 28px;
    margin-bottom: 15px;
    border-radius: 25px;
    color: #fff;
}
.button-group{width: 100%;}
.radio-label {margin-right:21%;}
.radio-label {padding:10px;border-radius:50% !important;}
.radio-label input {display:none;}
.btn-group label.active {background: #FF9800;    transform: scale(1.8);    border-color: #FF9800;}

4. Use JQuery Script :

$(function() {
    $('input[type="radio"]').change(function() {
        var rad = $(this).attr('id');           
            $('#' + rad + 'Div').show();
            $('#' + rad + 'MyDiv').show();
            $('#' + rad + 'Div').siblings('div').hide();
            $('#' + rad + 'MyDiv').siblings('div').hide();
    });
});

Done 🙂