Trigger Click on Input when Label is Clicked

Labels should have "for" attributes that match the ID of the input they are labeling. This means we can snag that attribute and use it in a selector to trigger a click on the input itself. Assuming of course you have some reason to watch for clicks on inputs.

var labelID;

$('label').click(function() {
       labelID = $(this).attr('for');
       $('#'+labelID).trigger('click');
});

Comments

  1. User Avatar
    TeMc
    Permalink to comment#

    Not sure if that’s what you mean, but Safari does this built-in.

  2. User Avatar
    Bill Brown
    Permalink to comment#

    All browsers except IE will do this when you code it this way:


    <label><input id='my_input'/></label>

    IE requries this:

    <label for='my_input'><input id='my_input'/></label>

    • User Avatar
      Sumedh

      Wonderful Man. Your comment is far better and helpful than this post..

    • User Avatar
      Muhammad Nouman Khalid
      Permalink to comment#

      duplicate ID error + warning when checked in w3c validator. So now its time to use HTML5 tags…

  3. User Avatar
    TerranRich
    Permalink to comment#

    Yeah I really don’t see the point in this jQuery code. Using the “for” attribute of the LABEL tag, all browsers have this functionality already built-in. Kind of a useless post, really.

  4. User Avatar
    Thomas Murphy
    Permalink to comment#

    Helpful for me especially with Gravity Forms (or anything that dynamically creates the form fields for you). One error though, $(‘#’+labelid).trigger(‘click’); should be $(‘#’+labelID).trigger(‘click’);

    Thanks

  5. User Avatar
    Paula Lyon-Lee

    Brilliant piece of code just what I was looking for.

    This actually fixes the IE bug when you are using images within form labels.

    Normally what happens with a label is that when you click it the field it is for get focus, unfortunately IE for some reason or another seems to loose this functionality when you use images within form labels.

    Thanks
    Paula

  6. User Avatar
    Carson
    Permalink to comment#

    This code is actually pretty handy if you use FastClick on iOS (to avoid 300ms click delay).

    In the rare case you have a label on top of a radio button or checkbox, FastClick prevents the label from checking the input.

    No FastClick? No problem, shouldn’t need this.

  7. User Avatar
    pk
    Permalink to comment#

    If you have hidden radio buttons and are using the label to style things (not terribly uncommon), this is a life saver for mobile devices. Thanks man.

  8. User Avatar
    Matt
    Permalink to comment#

    Fantastic. Thanks so much.

    Why does this matter? Because the tag is not clickable in iOS 5 Safari (iPad gen 1’s maximum OS). Thanks to this code, the click works the same in iOS 5 as in every other modern browser.

  9. User Avatar
    james
    Permalink to comment#

    hahahaha

  10. User Avatar
    spina

    hello,

    with Safari IOS5.1.1, i fixed it with :

    Yes… just an empty onclick, lol

    see u ;)

  11. User Avatar
    spina

    (block code bug… sorry)
    hello,

    with Safari IOS5.1.1, i fixed it with :

    input type="checkbox" name="namecheck" id="namecheck-01" value="1"
    label  for="namecheck-04" onclick=""
    

    Yes… just an empty onclick, lol

    see u ;)

  12. User Avatar
    Marc
    Permalink to comment#

    thanks mate!

  13. User Avatar
    tmprojects
    Permalink to comment#

    I need this code for Gravity form images to make clickable but fails to work. Wondering if I also need to input code in the Field ID’s Custom CSS Class of my GF?

    The “onclick” would actually select the option. Not sure if this code would work for that.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag