"for = id"를 사용하지 않고 레이블을 확인란과 연결할 수 있습니까?

"for = id"를 사용하지 않고 레이블을 확인란과 연결할 수 있습니까?

---

때때로 레이블을 확인란과 연결하는 것이 좋습니다.

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

..하지만 내가 할 이 연관에 ID를 사용할 수 있나요?
내가 신경 쓰는 주된 이유는 라벨을 클릭하여 체크 박스 값을 전환 할 수있는 것을 좋아하지만 그렇게 간단한 것에 ID를 사용하는 것은 싫기 때문입니다.

클릭 한 레이블의 이전 요소 (체크 박스)를 jQuery를 사용하여 토글 할 수 있지만 더 간단한 것이 누락되었을 수 있습니다. https://stackoverflow.com/a/2720771/923817 은 해결책처럼 보였지만 사용자는 IE에서 작동하지 않는다고 말했습니다.

---

예, 라벨 내부에 입력을 배치합니다.

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

HTML 사양에서 암시 적 레이블 연결 을 참조하세요 .

---

데모 : 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>

---

<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

참고URL : https://stackoverflow.com/questions/8537621/possible-to-associate-label-with-checkbox-without-using-for-id