單選按鈕和矩陣表點擊數選擇

Question

我有這種形式的單選按鈕Package Builder

在線路1中，我們有：[] 6 [] 12 [] 18 [] 24
第2行，我們有： [] T1 [] T2 [] T3 [] T4

想法是一個用戶只能選擇其中一個，看看這個排列：T1-6，T1-12，T1-18，T1-24 ...直到T4-24。

我有此表，他們假設拉從數據，見下文

 T1 T2 T3 T4 
6 450 470 490 520 
12 250 270 290 330 
18 190 210 230 270 
24 160 180 200 230 

如果用戶1選擇T1和6它應該輸出450中，T1和12應輸出250，T4和18輸出270 。

如何使用jQuery實現此目的？

$(function() { 
 
    $('.tplan').on('click', function (event) { 
 
     var id = $(this).attr('id'); 
 
     $('.tplan').removeClass('selected-tplan'); 
 
     $(this).addClass('selected-tplan'); 
 
     $(".tplan").removeClass("active-tplan"); 
 
     $(this).addClass("active-tplan"); 
 
     $('#tplan').val(id); 
 
     optionClicked(); 
 
    }); 
 

 
    $('.term').on('click', function (event) { 
 
     var id = $(this).attr('id'); 
 
     $('.term').removeClass('selected-term'); 
 
     $(this).addClass('selected-term'); 
 
     $(".term").removeClass("active-term"); 
 
     $(this).addClass("active-term"); 
 
     $('#term').val(id); 
 
     optionClicked(); 
 

 
    }); 
 
}); 
 

 
function optionClicked() { 
 
    var terms = { 6: [450, 470, 490, 520], 12: [250, 270, 290, 330], 18: [190, 210, 230, 270], 24: [160, 180, 200, 230] }; 
 
    var plan = ["T1", "T2", "T3", "T4"]; 
 
    var term = $('.selected-term').parent().prevAll().length; 
 
    var plan = $('.selected-tplan').parent().prevAll().length; 
 
}

<script src="https://code.jquery.com/jquery-2.1.4.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 btn-group-justified"> 
 
     <div class="btn-group btn-group-lg"> 
 
      <button type="button" class="btn btn-default btn-md btn-block term" id='6months'>6</button> 
 
     </div> 
 
     <div class="btn-group btn-group-lg"> 
 
      <button type="button" class="btn btn-default btn-md btn-block term" id='12months'>12</button> 
 
     </div> 
 
     <div class="btn-group btn-group-lg"> 
 
      <button type="button" class="btn btn-default btn-md btn-block term" id='18months'>18</button> 
 
     </div> 
 
     <div class="btn-group btn-group-lg"> 
 
      <button type="button" class="btn btn-default btn-md btn-block term active-term selected-term" id='24months'>24</button> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="price-slided"> 
 
    <h4 class="great">Airtime/Data Plan</h4> 
 
    <span>Please choose one</span> 
 
    <div class="btn-group btn-group-justified" id="cplanDiv"> 
 
     <div class="btn-group btn-group-lg"> 
 
      <button type="button" class="btn btn-default btn-md btn-block tplan active-tplan selected-tplan" id='T1'>T1</button> 
 
     </div> 
 
     <div class="btn-group btn-group-lg"> 
 
      <button type="button" class="btn btn-default btn-md btn-block tplan" id='T2'>T2</button> 
 
     </div> 
 
     <div class="btn-group btn-group-lg"> 
 
      <button type="button" class="btn btn-default btn-md btn-block tplan" id='T3'>T3</button> 
 
     </div> 
 
     <div class="btn-group btn-group-lg"> 
 
      <button type="button" class="btn btn-default btn-md btn-block tplan" id='T4'>T4</button> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

我考慮不同的方向：使用單選按鈕，而不是按鈕。 只是它們的意圖更有意義。

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); 
 
    } 
 
}

#result { 
 
    font-weight:bold; 
 
}

<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>

http://jsbin.com/yetago