Twitter Bootstrap onclick event on buttons-radio

Question

I have Twitter buttons Twitter bootstrap and connect the onclick event to it. But how can I check which of the buttons started?

My first thought was to just check the "active" class, but that should create a race condition (the result depends on whether the Twitter Bootstrap event is running or my own onclick event).

Answer 1

This is really annoying. As a result, I used the following:

First, create a group of simple buttons without the 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> 

Then write an event handler that mimics the effect of the switch, “activating” the clicked and “deactivating” all the other buttons. (EDIT: Integrated Nick is a cleaner option from the comments.)

 $('#selector button').click(function() { $(this).addClass('active').siblings().removeClass('active'); // TODO: insert whatever you want to do with $(this) here }); 

Answer 2

I see a lot of complex answers, while this is just super in Bootstrap 3:

Step 1: use the official code example to create a group of radio buttons and provide the container with an identifier:

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

Answer 3

I would use the change event not like this:

 $('input[name="name-of-radio-group"]').change( function() { alert($(this).val()) }) 

Answer 4

For Bootstrap 3 , the default radio / button group structure is:

 <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> Option 1 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Option 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Option 3 </label> </div> 

And you can choose the active one:

 $('.btn-primary').on('click', function(){ alert($(this).find('input').attr('id')); }); 

Answer 5

Do not use the data-toggle attribute so that you can control the behavior of the switch yourself. Therefore, he will avoid the "race condition"

my codes are:

button group template (written in .erb, built-in ruby ​​for rubies on rails):

 <div class="btn-group" id="featuresFilter"> <% _.each(features, function(feature) { %> <button class="btn btn-primary" data="<%= feature %>"><%= feature %></button> <% }); %> </div> 

and javascript:

 onChangeFeatures = function(e){ var el=e.target; $(el).button('toggle'); var features=el.parentElement; var activeFeatures=$(features).find(".active"); console.log(activeFeatures); } 

The onChangeFeatures function will be activated after clicking the button.

Answer 6

I needed to do the same for the chart, where you could choose the period of the data that should be displayed.

So I introduced the CSS class “btn-group-radio” and used the following unobtrusive single-line javascript:

 // application.js $(document).ready(function() { $('.btn-group-radio .btn').click(function() { $(this).addClass('active').siblings('.btn').removeClass('active'); }); }); 

And here is the HTML:

 <!-- some arbitrary view --> <div class="btn-group btn-group-radio"> <%= link_to '1W', charts_path('1W'), class: 'btn btn-default active', remote: true %> <%= link_to '1M', charts_path('1M'), class: 'btn btn-default', remote: true %> <%= link_to '3M', charts_path('3M'), class: 'btn btn-default', remote: true %> <%= link_to '6M', charts_path('6M'), class: 'btn btn-default', remote: true %> <%= link_to '1Y', charts_path('1Y'), class: 'btn btn-default', remote: true %> <%= link_to 'All', charts_path('all'), class: 'btn btn-default', remote: true %> </div> 

Answer 7

Looking at the HTML example for the switches on the Twitter Bootstrap page ( http://twitter.github.com/bootstrap/base-css.html#forms ), you can see that each entry has a unique Identifier, i.e. optionsRadios1 and optionsRadios2 .

The corresponding snippet of the HTML example is included for completeness:

 <div class = "controls">
   <label class = "radio">
     <input type = "radio" checked = "" value = "option1" id = "optionsRadios1" name = "optionsRadios">
     Option one is this and that — be sure to include why it great
   </label>
   <label class = "radio">
     <input type = "radio" value = "option2" id = "optionsRadios2" name = "optionsRadios">
     Option two can is something else and selecting it will deselect option one
   </label>
 </div>

So, you can use the jQuery click event, and then use the this link to look at the identifier of the HTML element that was clicked.

 $ ('. controls'). find ('input'). bind ('click', function (event) {
   if ($ (this) .attr ('id') === 'optionsRadios1') {
     alert ($ (this) .attr ('id'));
   } else {
     // ... call some other function
   }
 });

Answer 8

I searched for so many pages: I found a beautiful solution. Check this:

git link

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> <script> $(function() { $("#my_launch_today_chk").change(function() { var chk = $(this).prop('checked'); if(chk == true){ console.log("On"); }else{ console.log("OFF"); } }); }); </script> </head> <body > <input type="checkbox" id="my_launch_today_chk" checked data-on="Launch" data-off="OFF" data-toggle="toggle" data-size="small"> </body> </html> 

Answer 9

If your html is like an example, so the click event is fired above the label, and not on the input, so I use the following code: Html example:

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

Javascript code for the event:

 $('#option1').parent().on("click", function () { alert("click fired"); });