Bootstrap radio button checked flag

Question

In case  1 works  in case  2 it do not works  Check the code bellow    lt div class  container  gt       lt div class  row  gt           lt h1 gt Radio Group  1 lt  h1 gt           lt label class  radio-inline  gt             lt input name  radioGroup  id  radio1  value  option1  type  radio  gt  1          lt  label gt           lt label class  radio-inline  gt             lt input name  radioGroup  id  radio2  value  option2  checked  checked  type  radio  gt  2          lt  label gt           lt label class  radio-inline  gt             lt input name  radioGroup  id  radio3  value  option3  type  radio  gt  3          lt  label gt       lt  div gt       lt div class  row  gt           lt h1 gt Radio Group  2 lt  h1 gt           lt label for  year  class  control-label input-group  gt Year lt  label gt           lt div class  btn-group  data-toggle  buttons  gt               lt label class  btn btn-default  gt                   lt input name  year  value  2011  type  radio  gt 2011              lt  label gt               lt label class  btn btn-default  gt                   lt input name  year  value  2012  type  radio  gt 2012              lt  label gt               lt label class  btn btn-default  gt                   lt input name  year  value  2013  checked  checked  type  radio  gt 2013              lt  label gt           lt  div gt         lt  div gt     lt  div gt    You can see it in action here  http   bootply com 84165

User · Answer

Use active class with label to make it auto select and use checked           lt label class  btn btn-primary  active  value  regular   style  width 47   gt      lt input  type  radio  name  service  checked      gt  Regular  lt  label gt      lt label class  btn btn-primary   value  express  style  width 46   gt      lt input type  radio  name  service  gt  Express  lt  label gt

User · Answer

In case you want to use bootstrap radio to check one of them depends on the result of your checked var in the  ts file  component html  lt h1 gt Radio Group  1 lt  h1 gt   lt div class  quot btn-group btn-group-toggle quot  data-toggle  quot buttons quot   gt      lt label  ngClass   quot checked    active       quot  class  quot btn btn-outline-secondary quot  gt        lt input name  quot radio quot  id  quot radio1 quot  value  quot option1 quot  type  quot radio quot  gt  TRUE     lt  label gt      lt label  ngClass   quot  checked    active       quot  class  quot btn btn-outline-secondary quot  gt        lt input name  quot radio quot  id  quot radio2 quot  value  quot option2 quot  type  quot radio quot  gt  FALSE     lt  label gt   lt  div gt   component ts file  Component     selector        templateUrl      component html     styleUrls       component css      export class radioComponent implements OnInit     checked   true

User · Answer

You have to use active in the label to make it work as mentioned above  But you can use checked  checked  and it will work too  It s not necessary but it s more legible and makes more sense as it is more html format compliance

User · Answer

A javascript fix to apply the  active  class to all labels that are parents of checked inputs       input checked   parent   btn   addClass  active      insert right after       btn   button

User · Answer

Assuming you want a default button checked    lt div class  row  gt       lt h1 gt Radio Group  2 lt  h1 gt       lt label for  year  class  control-label input-group  gt Year lt  label gt       lt div class  btn-group  data-toggle  buttons  gt           lt label class  btn btn-default  gt               lt input type  radio  name  year  value  2011  gt 2011          lt  label gt           lt label class  btn btn-default  gt               lt input type  radio  name  year  value  2012  gt 2012          lt  label gt           lt label class  btn btn-default active  gt               lt input type  radio  name  year  value  2013  checked    gt 2013          lt  label gt       lt  div gt     lt  div gt    Add the active class to the button  label tag  you want defaulted and checked    to its input tag so it gets submitted in the form by default

[html] Bootstrap radio button "checked" flag

Examples related to html

Examples related to twitter-bootstrap

Examples related to radio-button