I’ve seen a few methods of this using over-elaborate JavaScript, when its really not necessary.
All you need to do is wrap the <input with a <label – as a label will inherently become a ‘clicky’ for its children:
<label><input type="radio" name="radio-option" value="cake" />cake</label> <label><input type="radio" name="radio-option" value="biscuits" />biscuits</label>
Easy
This can also be achieved using the “for” attribute 🙂
biscuits
Yeah, but this is nicer I think. Especially if the label is right next to the checkbox/radio option…
Its more semantic to have it separate. It also helps with CSS styling and layout
How does it alter the way you style it? Its still a label!
If you were to have the label in a different position on the page, then yes, you would use the ‘for’ attribute, but I don’t see the point if its wrapped around the element.
Its designed to inherit the contained object and therefore is more ‘native’
Also, its stated in w3c standards that its okay:
http://www.w3.org/wiki/HTML/Elements/label (Example B)