Twitter Bootstrap onclick event on buttons-radio
I have a Twitter Bootstrap buttons-radio and hook an onclick event to it. But how do I check which of the buttons that got triggered?
My first thought was to simply check for the class 'active', but this should create a race condition (result depends on whether the Twitter Bootstrap event or my own onclick event is handled first).
This is a really annoying one. What I ended up using is this:
First, create a group of simple buttons with no data-toggle
attribute.
<div id="selector" class="btn-group">
<button type="button" class="btn active">Day</button>
<button type="button" class="btn">Week</button>
<button type="button" class="btn">Month</button>
<button type="button" class="btn">Year</button>
</div>
Next, write an event handler that simulates the radio button effect by 'activating' the clicked one and 'deactivating' all other buttons. (EDIT: Integrated Nick's cleaner version from the comments.)
$('#selector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
// TODO: insert whatever you want to do with $(this) here
});
I see a lot of complicated answers, while this is super simple in Bootstrap 3:
Step 1: Use the official example code to create your radio button group, and give the container an id:
<div id="myButtons" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
Step 2: Use this jQuery handler:
$("#myButtons :input").change(function() {
console.log(this); // points to the clicked input button
});
Try the fiddle demo
I would use a change event not a click like this:
$('input[name="name-of-radio-group"]').change( function() {
alert($(this).val())
})