CODEWITHSUNDEEP
htmlforms
SamesJeabrook
SamesJeabrook

Reputation: 1567

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>

Upvotes: 81

Views: 281568

Answers (7)

piyush
piyush

Reputation: 1

Basically, you have to give the same name attribute to all the them , so that only one can be selected among them...

here's the corrected code:-

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

Upvotes: 0

lukasgeiter
lukasgeiter

Reputation: 153150

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>

Upvotes: 176

MarijnS95
MarijnS95

Reputation: 4793

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.

Upvotes: 3

Todd Williams
Todd Williams

Reputation: 267

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>

Upvotes: 6

user3040525
user3040525

Reputation: 41

All radio buttons must have the same name attribute added.

Upvotes: 2

Omaralajlan
Omaralajlan

Reputation: 49

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.

Upvotes: 5

JMPG Developer
JMPG Developer

Reputation: 74

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)

Upvotes: 1

Related Questions