264
<input type="checkbox" name="filter" id="comedyclubs"/>
<label for="comedyclubs">Comedy Clubs</label>

If I have a check box with a label describing it, how can I select the label using jQuery? Would it be easier to give the label tag an ID and select that using $(#labelId) ?

informatik01
  • 16,038
  • 10
  • 74
  • 104
Darwyn
  • 4,696
  • 3
  • 25
  • 26

5 Answers5

490

This should work:

$("label[for='comedyclubs']")

See also: Selectors/attributeEquals - jQuery JavaScript Library

Kip
  • 107,154
  • 87
  • 232
  • 265
  • 3
    For Webkit browsers (Safari/Chrome), you can do `$('#comedyclubs')[0].labels` to access all the labels assigned to `#comedyclubs`. – Matt Aug 09 '12 at 02:17
  • 1
    Use .text() to convert object to string: alert($("label[for='comedyclubs']").text()); – Loren Dec 12 '12 at 18:56
  • simply using $("label[for='comedyclubs']") will get you the value but it will make the label blank. so, use $("label[for='comedyclubs']").text() – shahil Jan 12 '14 at 08:47
76
$("label[for='"+$(this).attr("id")+"']");

This should allow you to select labels for all the fields in a loop as well. All you need to ensure is your labels should say for='FIELD' where FIELD is the id of the field for which this label is being defined.

gsamaras
  • 71,951
  • 46
  • 188
  • 305
Hanky Panky
  • 46,730
  • 8
  • 72
  • 95
  • 5
    This is a great answer for anyone who has more than one field. This answer should be #1. –  Apr 28 '13 at 08:03
47

This should do it: 

$("label[for=comedyclubs]")

If you have non alphanumeric characters in your id then you must surround the attr value with quotes:

$("label[for='comedy-clubs']")
Darko
  • 38,310
  • 15
  • 80
  • 107
5

Another solution could be:

$("#comedyclubs").next()
BCsongor
  • 869
  • 7
  • 11
  • 13
    this might not be the most stable solution, as it requires the label to always be the next item after the checkbox. a graphical redesign might break this logic. – Kip Feb 03 '11 at 19:16
  • 3
    right! but in this case works fine :D and for litle more secure version we can define .next('label'), or .prev('label'). – BCsongor Feb 05 '11 at 10:30
  • A minor stabilization improvement would be: `$("#comedyclubs").nextAll().first()` – sscirrus Jan 21 '12 at 12:11
  • like your approach. $().next().text() – Rm558 Feb 25 '15 at 19:50
2

Thanks Kip, for those who may be looking to achieve the same using $(this) whilst iterating or associating within a function:

$("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );

I looked for a while whilst working this project but couldn't find a good example so I hope this helps others who may be looking to resolve the same issue.

In the example above, my objective was to hide the radio inputs and style the labels to provide a slicker user experience (changing the orientation of the flowchart).

You can see an example here

If you like the example, here is the css:

.orientation {      position: absolute; top: -9999px;   left: -9999px;}
    .orienlabel{background:#1a97d4 url('http://www.ifreight.solutions/process.html/images/icons/flowChart.png') no-repeat 2px 5px; background-size: 40px auto;color:#fff; width:50px;height:50px;display:inline-block; border-radius:50%;color:transparent;cursor:pointer;}
    .orR{   background-position: 9px -57px;}
    .orT{   background-position: 2px -120px;}
    .orB{   background-position: 6px -177px;}

    .orienSel {background-color:#323232;}

and the relevant part of the JavaScript:

function changeHandler() {
    $(".orienSel").removeClass( "orienSel" );
    if(this.checked) {
        $("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );
    }
};

An alternate root to the original question, given the label follows the input, you could go with a pure css solution and avoid using JavaScript altogether...:

input[type=checkbox]:checked+label {}
Pete - iCalculator
  • 929
  • 1
  • 8
  • 12