Possible to associate label with checkbox without using "for=id"?

Question

I know that it is good sometimes to associate a label with a checkbox:

<input id="something" type="checkbox" value="somevalue" />
<label for="something">this is label text</label>

..but do I have to use an id to associate it?
The main reason I even care is because I like being able to click a label to toggle the checkbox value, but don't like the idea of using an id for something so simple.

I guess I could use jQuery toggle the previous element (checkbox) of a clicked label, but maybe there is something simpler I'm missing. https://stackoverflow.com/a/2720771/923817 looked like a solution, but the user said it doesn't work in IE.

If you're looking for another solution check: https://stackoverflow.com/questions/2703356/how-can-i-use-the-for-attribute-of-a-label-tag-without-the-id-attribute-on-the-i/69839870#69839870 — ZuteZz, Nov 04 '21 at 13:22

Madara's Ghost · Accepted Answer · 2015-08-23T12:39:16.043

203

Yes, place the input inside the label.

<label><input type=checkbox name=chkbx1> Label here</label>

See implicit label association in the HTML specifications.

edited Aug 23 '15 at 12:39

answered Dec 16 '11 at 17:07

Madara's Ghost

172,118
50
264
308

4

+1 Best solution - see HTML Spec for [implicit label association](http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1). – SliverNinja - MSFT Dec 16 '11 at 17:10
3

does this work in IE? http://stackoverflow.com/a/2720771/923817 suggests it doesn't – D.Tate Dec 16 '11 at 17:11
4

Limitation (according to spec): *Note that this technique cannot be used when a table is being used for layout, with the label in one cell and its associated control in another cell.* – SliverNinja - MSFT Dec 16 '11 at 17:12
IE started supporting this in IE 7. – Jukka K. Korpela Dec 16 '11 at 17:14
hm, maybe the guy at stackoverflow.com/a/2720771/923817 was just having a table issue and not an IE issue. Anyway, I guess I will just test this code out myself. If it works in IE, I'll mark Truth's answer as True (accepted) ;) – D.Tate Dec 16 '11 at 17:15
1

it works! I opened up IE9 and used F12 Developer Tools to test IE 7/8/9 Browser and Document mode. Worked fine. hip hip hooray! no more id associations for me. Thanks everyone – D.Tate Dec 16 '11 at 17:24
This also ensures that the checkbox and the label get wrapped together. – Adam Feb 15 '17 at 14:49
I have been torturing myself with id and for all these years. Thank you, man. I feel I am free today. – Behnam Jan 25 '22 at 06:48

score 5 · Answer 2 · answered Mar 30 '16 at 10:17

Demo: JsFiddle

.c-custom-checkbox {
  padding-left: 20px;
  position: relative;
  cursor: pointer;
}
.c-custom-checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 15px;
  width: 15px;
  padding: 0;
  border: 0;
  left: 0;
}
.c-custom-checkbox .c-custom-checkbox__img {
  display: inline;
  position: absolute;
  left: 0;
  width: 15px;
  height: 15px;
  background-image: none;
  background-color: #fff;
  color: #000;
  border: 1px solid #333;
  border-radius: 3px;
  cursor: pointer;
}
.c-custom-checkbox input[type=checkbox]:checked + .c-custom-checkbox__img {
  background-position: 0 0;
  background-color: tomato;
}

<label class="c-custom-checkbox">
  <input type="checkbox" id="valueCheck" />
  <i class="c-custom-checkbox__img"></i>Some Label
</label>

score 0 · Answer 3 · answered Nov 12 '13 at 07:36

0

<label for="something">this is label text</label>
<input id="something" type="checkbox" value="somevalue" />

actually the for attribute was used for screen readers to disabled persons, so not useful for accessibility to write without for attribute

answered Nov 12 '13 at 07:36

Web Designer cum Promoter

1,334
14
26

Using an input contained inside a label wont mess with screen readers unless they are poorly written. Its a pretty simple parsing case. – Joao Carlos Aug 10 '15 at 18:29
@JoaoCarlos From https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html#ua2.18.1: "The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, First name )." – Steve Harrison Jul 05 '16 at 01:07
Not sure if this is still an issue with modern browsers + screen readers though. – Steve Harrison Jul 05 '16 at 01:08
What are you supposed to do with a labeled element within a list. In React this happens all the time, and using indexes or ids in `htmlFor` and the `id` is clunky and incredibly awkward. – Jordan Sep 25 '21 at 02:51

Possible to associate label with checkbox without using "for=id"?

3 Answers3

Linked

Related