Select radio button/checkbox by clicking on its caption

A blog on technology and web culture

Guy Malachi

Home

The new site design is here!

Alfred open folder hotkey workflow

How to customize Alfred to work with Google Calendar (Alfred workflow)

Sh#%, I messed up

The 6 best apps for managing your tasks, now that Microsoft is killing Wunderlist

Snapchat trick - How to upload any photo to Snapchat without the white borders!

Why do we doodle

BE AN UNDERACHIEVER

3 best ways to stream videos to Chromecast

PHP code for fetching a remote file and saving it with the right file name

Why the top Super Bowl 2013 ads worked

How I proposed using a Chrome extension

Employee Equity by Fred Wilson

Why Draw Something Works

GrrReader

Discovering Apps

Designing a Logo

Twylah - Your Trending Tweets

Leaving Conduit

Techonomy3 - The Rundown

My Talk On Next Generation Game Platforms

Summing Up SXSW

2011 - What Will We See?

Traveler From The Future

We Don't Need No Stinkin' Code Monkeys

Source Code

How 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):

One
Two
Three
Four
Five

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 .