Toggle radio buttons by clicking the label

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

5 comments on “Toggle radio buttons by clicking the label

  1. Andy Hunt March 19, 2013 5:13 pm

    This can also be achieved using the “for” attribute 🙂


    biscuits

    • admin March 19, 2013 5:15 pm

      Yeah, but this is nicer I think. Especially if the label is right next to the checkbox/radio option…

      • Andy Hunt March 19, 2013 5:21 pm

        Its more semantic to have it separate. It also helps with CSS styling and layout

        • admin March 19, 2013 5:25 pm

          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.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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