HTML radio buttons allowing multiple selections

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>

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>

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>

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.

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.

All radio buttons must have the same name attribute added.

To the radio buttons works correctly, you must to have grouped by his name. (Ex. name="type")

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

It will returns the value of the radio button checked (Ex. track | event | message)