using a link to activate a radio button

[photo312]

Hi,

I have a form with 3 radio buttons:

<tr>
		<td><input type=radio name="planid" id="planid" value="1"></td>
		<td align="left"><a href="" class="b bubble" title="Click Here For The Individual Plan">Individual</a> 
		</td>	  
	</tr>
	<tr>
			<td><input type=radio name="planid" id="planid" value="2"></td>
			<td align="left"><a href="#" class="b bubble">Couples/Buddies</a> 
			</td>
			 
	</tr>
</table>

I would like to be able to click on the link next to the radio and have that radio be checked upon the clicking...how do I do this darn thing?

Thanks

[Kravvitz]

Whoa. Slow down. You don't need a link or JavaScript. You need a <label>, which is the proper way to do that. Check these out:

Simple Tricks for More Usable Forms: Labels
Accessible HTML/XHTML Forms
Accessible forms: Guidelines, examples and accessible JavaScript tricks.
Prettier Accessible Forms

[photo312]

Hi,

I tried with the lable but because I have 3 radio buttons it would not render propely.

How do I do the label that corresponds to the right radio if all radios have the same name and ID?

Thanks

[neilmerton]

You should never have multiple elements on a page with the same id - that defeats the purpose of having ids.

I would change your ids to planid1 and planid2 - then you can successfully use the label to interact with the input elements.

[photo312]

but thats not how radio buttons work! I want them to be able to select only one radio!!!!!!!!!!!!!!!!!

[Kravvitz]

No, it's the name that makes a radio button group, not the ID. The IDs don't have to match the names.

[neilmerton]

here's an example (from one of the links Kravvitz posted):

<label for="rad_0"><input type="radio" name="rad" id="rad_0" title="Red" checked="checked" /> Red</label>
<label for="rad_1"><input type="radio" name="rad" id="rad_1" title="Blue" /> Blue</label>

as you can see both input's have the same name - it's the id's that are different thus allowing you to utilise the label properly.