Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="price-slided">
    <h4 class="great">Term (months)</h4>
    <span>Please choose one</span>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="radio" name="term" value="6" />
            6
        </label>
        <label class="btn btn-default">
            <input type="radio" name="term" value="12" />
            12
        </label>
        <label class="btn btn-default">
            <input type="radio" name="term" value="18" />
            18
        </label>
        <label class="btn btn-default active">
            <input type="radio" name="term" value="24" checked="checked" />
            24
        </label>
    </div>
</div>
​
<div class="price-slided">
    <h4 class="great">Airtime/Data Plan</h4>
    <span>Please choose one</span>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default active">
            <input type="radio" name="plan" value="0" checked="checked" />
            T1
        </label>
        <label class="btn btn-default">
            <input type="radio" name="plan" value="1" />
            T2
        </label>
        <label class="btn btn-default">
            <input type="radio" name="plan" value="2" />
            T3
        </label>
        <label class="btn btn-default">
            <input type="radio" name="plan" value="3" />
            T4
        </label>
    </div>
</div>
<hr />
Result: <span id="result">Pick a term and plan</span>
</body>
</html>
 
var termsData = { 6: [450, 470, 490, 520], 12: [250, 270, 290, 330], 18: [190, 210, 230, 270], 24: [160, 180, 200, 230] };
​
$(function () {
  $(':radio').change(calc);
  calc();
});
​
function calc() {
  var term = $('[name="term"]:checked').val(),
      plan = $('[name="plan"]:checked').val();
​
  // check that term and plan are choosed
  if (term && plan) {
    var result = termsData[term][parseInt(plan)];
    $('#result').html(result);
  }  
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
moshfeupro
0viewers