如何将多组引导单选按钮的值相加？

Question

寻求一些帮助，尝试获取两个选定按钮的值，添加它们，然后输出答案...

我已经整理了一个js fiddle here，而 jQuery 从来都不是我的强项，所以我很难理解引导程序的单选按钮，这些单选按钮实际上并不是“传统”单选按钮......

<div class="control-group">
<h4>How much you wanna give me today?</h4>
    <div class="controls">
         <div class="btn-group" id="pay-me-friend" data-toggle="buttons-radio">
              <button type="button" name="dollar" class="btn" value="100">$100</button>
              <button type="button" name="dollar" class="btn" value="200">$200</button>
              <button type="button" name="dollar" class="btn" value="300">$300</button>
              <button type="button" name="dollar" class="btn" value="400">$400</button>
         </div>
    </div>
</div>
<div class="control-group">
    <h4>How much you wanna multiply that by?</h4>
        <div class="controls">
           <div class="btn-group" id="pay-me-multiply" data-toggle="buttons-radio">
              <button type="button" name="multiple" class="btn" value="1">1</button>
              <button type="button" name="multiple" class="btn" value="2">2</button>
              <button type="button" name="multiple" class="btn" value="3">3</button>
              <button type="button" name="multiple" class="btn" value="4">4</button>
           </div>
        </div>
</div>
<hr>
<div class="well">Total amount you'll pay me: <span id="displaynumber"></span></div>

这是我使用 javascript 的起点……我还应该补充一点，我想使用 keyup 函数，这样答案就可以随时改变……

$('#pay-me-friend > button.active').keyup(function(){    
    var no1 = $('#pay-me-friend > button.active').val(); 
    var no2 = $('#pay-me-multiply > button.active').val();    
    $('#displaynumber').html(no1 + no2);
});

Answer 1

目前没有您可以在 Bootstrap API 中利用的事件，但是他们使用的点击处理程序的简单覆盖可以使其更容易。

Bootsrap 问题中的此线程表明他们不愿意添加此功能：

https://github.com/twitter/bootstrap/issues/2380

以下内容将替换当前的点击处理程序并添加一个新的点击处理程序，其中触发了自定义事件。只需在引导加载之后和使用它的代码之前添加它：

$(document).off('click.button.data-api').on('click.button.data-api', '[data-toggle^=button]', function(e) {
    var $btn = $(e.target);
    if (!$btn.hasClass('btn')) {
        $btn = $btn.closest('.btn')
    };
    $btn.button('toggle');
    /* this is only change to code in bootstrap.js*/
    $btn.trigger('button_click');
});

现在在您的代码中，您可以将处理程序绑定到自定义事件button_click：

$('#pay-me-friend > button').on('button_click', function() {
    /* do calcs*/

})

演示：http://jsfiddle.net/3dPJA/1/

您将需要修改您的计算代码以使其在未进行两种选择的情况下不会得到NaN