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.

Answers:

Answer

Yes, place the input inside the label.

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

See implicit label association in the HTML specifications.

Answer

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>

Answer
<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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.