Twitter Bootstrap onclick event on buttons-radio

Question

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

User · Answer

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   lt div id  quot myButtons quot  class  quot btn-group quot  data-toggle  quot buttons quot  gt     lt label class  quot btn btn-primary active quot  gt       lt input type  quot radio quot  name  quot options quot  id  quot option1 quot  autocomplete  quot off quot  checked gt  Radio 1  preselected     lt  label gt     lt label class  quot btn btn-primary quot  gt       lt input type  quot radio quot  name  quot options quot  id  quot option2 quot  autocomplete  quot off quot  gt  Radio 2    lt  label gt     lt label class  quot btn btn-primary quot  gt       lt input type  quot radio quot  name  quot options quot  id  quot option3 quot  autocomplete  quot off quot  gt  Radio 3    lt  label gt   lt  div gt   Step 2  Use this jQuery handler     quot  myButtons  input quot   change function         console log this      points to the clicked input button      Try the fiddle demo

User · Answer

For Bootstrap 3 the default radio button-group structure is     lt div class  btn-group  data-toggle  buttons  gt       lt label class  btn btn-primary  gt           lt input type  radio  name  options  id  option1  gt  Option 1      lt  label gt       lt label class  btn btn-primary  gt           lt input type  radio  name  options  id  option2  gt  Option 2      lt  label gt       lt label class  btn btn-primary  gt           lt input type  radio  name  options  id  option3  gt  Option 3      lt  label gt   lt  div gt    And you can select the active one like this       btn-primary   on  click   function        alert   this  find  input   attr  id

User · Answer

I needed to do the same thing for a chart where you could select the period of the data that should be displayed    Therefore I introduced the CSS class  btn-group-radio  and used the following unobtrusive javascript one-liner      application js   document  ready function           btn-group-radio  btn   click function           this  addClass  active   siblings   btn   removeClass  active                And here is the HTML    lt  -- some arbitrary view -- gt   lt div class  btn-group btn-group-radio  gt     lt    link to  1W   charts path  1W    class   btn btn-default active   remote  true   gt     lt    link to  1M   charts path  1M    class   btn btn-default   remote  true   gt     lt    link to  3M   charts path  3M    class   btn btn-default   remote  true   gt     lt    link to  6M   charts path  6M    class   btn btn-default   remote  true   gt     lt    link to  1Y   charts path  1Y    class   btn btn-default   remote  true   gt     lt    link to  All   charts path  all    class   btn btn-default   remote  true   gt   lt  div gt

User · Answer

I searched so many pages  I found a beautiful solution  Check it out   git link   lt  DOCTYPE html gt   lt html gt   lt head gt    lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt   lt  -- Latest compiled and minified CSS -- gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt    lt  -- Optional theme -- gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap-theme min css  integrity  sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl Sp  crossorigin  anonymous  gt    lt  -- Latest compiled and minified JavaScript -- gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt   lt link href  https   gitcdn github io bootstrap-toggle 2 2 2 css bootstrap-toggle min css  rel  stylesheet  gt   lt script src  https   gitcdn github io bootstrap-toggle 2 2 2 js bootstrap-toggle min js  gt  lt  script gt        lt script gt            function                     my launch today chk   change function                     var chk     this  prop  checked                    if chk    true                       console log  On                     else                      console log  OFF                                                       lt  script gt   lt  head gt   lt body  gt    lt input type  checkbox  id  my launch today chk  checked data-on  Launch  data-off  OFF  data-toggle  toggle  data-size  small  gt   lt  body gt   lt  html gt

User · Answer

I would use a change event not a click like this      input name  name-of-radio-group     change  function       alert   this  val

User · Answer

If your html is similar to the example  so the click event is produced over the label  not in the input  so I use the next code  Html example    lt div id  myButtons  class  btn-group  data-toggle  buttons  gt     lt label class  btn btn-primary active  gt       lt input type  radio  name  options  id  option1  autocomplete  off  checked gt  Radio 1  preselected     lt  label gt     lt label class  btn btn-primary  gt       lt input type  radio  name  options  id  option2  autocomplete  off  gt  Radio 2    lt  label gt         lt  div gt    Javascript code for the event       option1   parent   on  click   function         alert  click fired

User · Answer

Don t use data-toggle attribute so that you can control the toggle behavior by yourself  So it will avoid  race-condition   my codes   button group template  written in  erb  embedded ruby for ruby on rails     lt div class  btn-group  id  featuresFilter  gt        lt     each features  function feature      gt   lt button class  btn btn-primary  data   lt    feature   gt   gt  lt    feature   gt  lt  button gt   lt         gt   lt  div gt    and javascript   onChangeFeatures   function e           var el e target            el  button  toggle             var features el parentElement          var activeFeatures   features  find   active            console log activeFeatures       onChangeFeatures function will be triggered once the button is clicked

User · Answer

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    lt div id  selector  class  btn-group  gt       lt button type  button  class  btn active  gt Day lt  button gt       lt button type  button  class  btn  gt Week lt  button gt       lt button type  button  class  btn  gt Month lt  button gt       lt button type  button  class  btn  gt Year lt  button gt   lt  div gt    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

User · Answer

Looking at the example HTML for radio buttons on the Twitter Bootstrap page  http   twitter github com bootstrap base-css html forms   you can see that each input has a unique ID attribute  i e  optionsRadios1 and optionsRadios2   The relevant HTML example snippet is included here for completeness     lt div class  controls  gt     lt label class  radio  gt       lt input type  radio  checked    value  option1  id  optionsRadios1  name  optionsRadios  gt      Option one is this and that mdash be sure to include why it s great    lt  label gt     lt label class  radio  gt       lt input type  radio  value  option2  id  optionsRadios2  name  optionsRadios  gt      Option two can is something else and selecting it will deselect option one    lt  label gt   lt  div gt    So you can use a jQuery click event  and then use the this reference to look at the id 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

[javascript] Twitter Bootstrap onclick event on buttons-radio

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to jquery-events