how to add up values from multiple groups of bootstrap radio buttons?

Question

Looking for a little help trying to get the value of two selected buttons, add them, then output answer...

I've put together a js fiddle here and jQuery has never been my forté so i'm struggling to get my head around bootstrap's radio buttons which are not actually 'traditional' radio buttons...

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

And here's my starting point with with javascript... i should also add i'd like to use the keyup function so the answer can change on the fly..

$('#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

There is no event you can currently tap into within Bootstrap API but a simple over-ride of the click handler they use can make it easier.

This thread in Bootsrap issues shows they are reluctant to add this functionality:

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

The following will replace current click handler and add a new one with a custom event triggered within it. Just add this any time after bootstrap loads and before your code that uses it:

$(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');
});

Now within your code you can bind a handler to the custom event button_click :

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

})

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

You will need to modify your calculations code to make it so you don't get NaN if both selections haven't been made