html - 위치 - 체크박스 가로정렬




확인란을 선택하여 텍스트 레이블을 클릭하는 방법은 무엇입니까? (6)

HTML 폼의 Checkboxes 에는 암시 적 레이블 이 없습니다. 옆에 명시 적 레이블 (일부 텍스트)을 추가해도 checkbox 토글되지 않습니다.

확인란을 선택하여 텍스트 레이블을 클릭하는 방법은 무엇입니까?


@Gatekiller와 다른 사람들이 지적한 것처럼 올바른 해결책은 <label> 태그입니다.

텍스트를 클릭하는 것이 좋지만, <label> 태그를 사용하는 또 다른 이유가 있습니다 : 접근성. 시각 장애인이 웹에 액세스하는 데 사용하는 도구는 확인란과 라디오 버튼의 의미를 알기 위해 <label>을 필요로합니다. <label>이 없으면 주변 텍스트를 기반으로 추측해야하며 종종 잘못되거나 포기해야합니다.

"귀하의 운송 방법을 선택하십시오. 라디오 버튼 1, 라디오 버튼 2, 라디오 버튼 3" 과 같은 양식에 직면하는 것은 매우 실망 스럽습니다 .

웹 접근성은 복잡한 주제입니다. <label>은 필요한 단계이지만 접근성 또는 적용되는 정부 규정 준수를 보장하기에 충분하지 않습니다.


HTML 코드를 올바르게 마크 업하면 자바 스크립트가 필요 없습니다. 다음 코드는 사용자가 레이블 텍스트를 클릭하여 확인란을 선택하도록합니다.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

label 요소의 for 속성은 입력 요소의 id 속성에 연결되며 나머지 요소는 브라우저에서 처리합니다.

이것은 다음에서 작동하도록 테스트되었습니다.

  • IE6
  • IE7
  • Firefox

라벨로 감싸는 것은 여전히 ​​상자 안의 아무 곳이나 클릭하는 것을 허용하지 않습니다. 이것은 나를 위해 일한다.

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

하지만 불행히도 효과적으로 두 번 토글하는 자바 스크립트가 많이 있습니다.


라벨에 체크 박스를 래핑 할 수 있습니다 :

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>

로니,

래퍼 요소 안에 레이블 텍스트와 체크 상자를 묶으려면 다음을 수행 할 수 있습니다.

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>

이 작동합니다.

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

그렇지 않다면, pleae corect me!







checkbox