CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
D.Tate
D.Tate

Reputation: 2309

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

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.

Upvotes: 87

Views: 35260

Answers (3)

egor.xyz
egor.xyz

Reputation: 3187

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>

Upvotes: 5

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175017

Yes, place the input inside the label.

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

See implicit label association in the HTML specifications.

Upvotes: 204

Web Designer cum Promoter
Web Designer cum Promoter

Reputation: 1336

<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

Upvotes: 0

Related Questions