A blog on technology and web culture

Guy Malachi

Source CodeHow to create a HTML radio button or checkbox that you can select by clicking on its caption

This will work for both checkboxes and radio buttons.

You need to have a unique id for each radio button (or checkbox) but, as usual, have the same name for all radio buttons in the same group (in order to have only one selected at a time).
<label for="TheRadioField1">
	<input type="radio" name="my_radio"
id="TheRadioField1" value="one">One</label>
<label for="TheRadioField2">
	<input type="radio" name="my_radio"
id="TheRadioField2" value="one">Two</label>

Here's a working example of how this works (click on the captions and the radio buttons and checkboxes will be selected):

You can also add a stylesheet in order to make the captions look clickable like links (thanks to Dave from MuffJam for this suggestion).
<style> LABEL { text-decoration:underline; color:blue; cursor:pointer;cursor:hand; } </style>

If you find this useful then all I ask is that you .
© 2011 Guy Malachi atguy.com, All Rights Reserved