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>
5 thought on “Toggle radio buttons by clicking the label”
This can also be achieved using the “for” attribute 🙂
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)