HTML radio buttons allowing multiple selections

Question

In my HTML form I have the below as a set of radio buttons  depending on what radio button you select depends on what the next form  lt fieldset gt  is revealed  this all works  The problem is for some reason they are working like a check box and not as a radio button  So you can select all options and not just the one at a time   Can anyone see where this is going wrong in the code below      lt fieldset gt           lt legend gt Please select one of the following lt  legend gt           lt input type  radio  name  track  id  track  value  track    gt  lt label for  track  gt Track Submission lt  label gt  lt br   gt           lt input type  radio  name  event  id  event  value  event     gt  lt label for  event  gt Events and Artist booking lt  label gt  lt br   gt           lt input type  radio  name  message  id  message  value  message    gt  lt label for  message  gt Message us lt  label gt  lt br   gt     lt  fieldset gt

User · Answer

To the radio buttons works correctly  you must to have grouped by his name   Ex  name  type      lt fieldset gt       lt legend gt Please select one of the following lt  legend gt       lt input type  radio  name  type  id  track  value  track    gt  lt label for  track  gt Track Submission lt  label gt  lt br   gt       lt input type  radio  name  type  id  event  value  event     gt  lt label for  event  gt Events and Artist booking lt  label gt  lt br   gt       lt input type  radio  name  type  id  message  value  message    gt  lt label for  message  gt Message us lt  label gt  lt br   gt      It will returns the value of the radio button checked  Ex  track   event   message

User · Answer

I ve done it this way in the past  JsFiddle   CSS    radio-option       cursor  pointer      height  23px      width  23px      background  url    images checkbox2 png  no-repeat 0px 0px      radio-option click       background  url    images checkbox1 png  no-repeat 0px 0px      HTML    lt li gt  lt div class  radio-option  gt  lt  div gt  lt  li gt   lt li gt  lt div class  radio-option  gt  lt  div gt  lt  li gt   lt li gt  lt div class  radio-option  gt  lt  div gt  lt  li gt   lt li gt  lt div class  radio-option  gt  lt  div gt  lt  li gt   lt li gt  lt div class  radio-option  gt  lt  div gt  lt  li gt    jQuery    lt script gt        document  ready function                 radio-option   click function                    this  not this  removeClass  click                  this  toggleClass  click                         lt  script gt

User · Answer

Try this way of formation  it is rather fancy       Have a look at this jsfiddle  Button-Radio   The idea is to choose a the radio as a button instead of the normal circle image

User · Answer

The name of the inputs must be the same to belong to the same group  Then the others will be automatically deselected when one is clicked

User · Answer

They all need to have the same name attribute   The radio buttons are grouped by the name attribute  Here s an example    lt fieldset gt       lt legend gt Please select one of the following lt  legend gt       lt input type  radio  name  action  id  track  value  track    gt  lt label for  track  gt Track Submission lt  label gt  lt br   gt       lt input type  radio  name  action  id  event  value  event     gt  lt label for  event  gt Events and Artist booking lt  label gt  lt br   gt       lt input type  radio  name  action  id  message  value  message    gt  lt label for  message  gt Message us lt  label gt  lt br   gt   lt  fieldset gt

User · Answer

All radio buttons must have the same name attribute added

[html] HTML radio buttons allowing multiple selections

Examples related to html

Examples related to forms