125

I have a set of input fields, some of them have labels associated, some not:

<label for="bla">bla</label> <input type="text" id="bla" />

<label for="foo">bla <input type="checkbox" id="foo" /> </label>

<input ... />

so, how can I select the associated label for each input, if it exists?

Alex
  • 66,732
  • 177
  • 439
  • 641
  • Will they always have the `for` attribute set? – user113716 Jan 30 '11 at 18:23
  • no, because some of the fiels don't have labels... – Alex Jan 30 '11 at 18:25
  • 1
    I think this is what you are looking for http://stackoverflow.com/questions/1186416/jquery-selector-for-the-label-of-a-checkbox :) – beon Jan 30 '11 at 18:27
  • What I meant was if there's an input that has a label, will the label always have the `for` attribute set. Naturally if there's no label, there's no `for` attribute. :o) – user113716 Jan 30 '11 at 18:42

3 Answers3

225

You shouldn't rely on the order of elements by using prev or next. Just use the for attribute of the label, as it should correspond to the ID of the element you're currently manipulating:

var label = $("label[for='" + $(this).attr('id') + "']");

However, there are some cases where the label will not have for set, in which case the label will be the parent of its associated control. To find it in both cases, you can use a variation of the following:

var label = $('label[for="' + $(this).attr('id') + '"]');

if(label.length <= 0) {
    var parentElem = $(this).parent(),
        parentTagName = parentElem.get(0).tagName.toLowerCase();
    
    if(parentTagName == "label") {
        label = parentElem;
    }
}
starball
  • 20,030
  • 7
  • 43
  • 238
jgradim
  • 2,851
  • 1
  • 16
  • 8
  • 12
    -1 for clumsy way to search for parent label tag. Also, – Maxim Kulkin Nov 13 '12 at 08:41
58

There are two ways to specify label for element:

  1. Setting label's "for" attribute to element's id
  2. Placing element inside label

So, the proper way to find element's label is

   var $element = $( ... )

   var $label = $("label[for='"+$element.attr('id')+"']")
   if ($label.length == 0) {
     $label = $element.closest('label')
   }

   if ($label.length == 0) {
     // label wasn't found
   } else {
     // label was found
   }
Maxim Kulkin
  • 2,698
  • 22
  • 11
15

As long and your input and label elements are associated by their id and for attributes, you should be able to do something like this:

$('.input').each(function() { 
   $this = $(this);
   $label = $('label[for="'+ $this.attr('id') +'"]');
   if ($label.length > 0 ) {
       //this input has a label associated with it, lets do something!
   }
});

If for is not set then the elements have no semantic relation to each other anyway, and there is no benefit to using the label tag in that instance, so hopefully you will always have that relationship defined.

Nathan Anderson
  • 6,768
  • 26
  • 29
  • In addition to the "for" attribute, the semantic relationship can be established by the input element being *within* the label -- see the answer by Maxim Kulkin – John Hascall Jul 01 '16 at 05:27
  • 1
    You mixed up the defining and using variables in php and javascript – rank Aug 19 '21 at 13:00