Question

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

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

<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

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

$(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*/

})

DEMO：http://jsfiddle.net/3dPJA/1/

您需要修改计算代码，以便在未进行选择的情况下获取NaN

如何从多组引导单选按钮中添加值？

1 个答案: