Menu
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> 
672
Radio buttons allow a user to select a single option among multiple options. You can set the Choice Value of each option, for each button, as well as group these buttons by giving them the same Group Name.
Check boxes allow multiple selections at a time and radio buttons allow only a single selection at a time, but both use the <input> tag to create each box or button.
Only one radio button in a given group can be selected at the same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.
Only one radio button in a group can be checked. You have two radio buttons with different names. This means that you have two radio groups, each containing one radio button. You need to put them in the same group (by making them share a name) if you only want one of them to be selected.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
