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 <fieldset> 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?

  <fieldset>         <legend>Please select one of the following</legend>         <input type="radio" name="track" id="track" value="track" /><label for="track">Track Submission</label><br />         <input type="radio" name="event" id="event" value="event"  /><label for="event">Events and Artist booking</label><br />         <input type="radio" name="message" id="message" value="message" /><label for="message">Message us</label><br />   </fieldset> 

Answer 1

They all need to have the same name attribute.

The radio buttons are grouped by the name attribute. Here's an example:

<fieldset>     <legend>Please select one of the following</legend>     <input type="radio" name="action" id="track" value="track" /><label for="track">Track Submission</label><br />     <input type="radio" name="action" id="event" value="event"  /><label for="event">Events and Artist booking</label><br />     <input type="radio" name="action" id="message" value="message" /><label for="message">Message us</label><br /> </fieldset> 

Answer 2

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:

<li><div class="radio-option"></div></li> <li><div class="radio-option"></div></li> <li><div class="radio-option"></div></li> <li><div class="radio-option"></div></li> <li><div class="radio-option"></div></li> 

jQuery:

<script>     $(document).ready(function() {         $('.radio-option').click(function () {             $(this).not(this).removeClass('click');             $(this).toggleClass("click");         });     }); </script>