"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" />

실제로 for 속성은 장애인에게 스크린 리더를 위해 사용되었기 때문에 속성 없이 쓰기 위한 접근성에는 유용하지 않습니다.

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