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

单选按钮和矩阵表onclick选择

1 个答案: