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

By admin

5 thought on “Toggle radio buttons by clicking the label”
        1. 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’

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.