클릭 가능한 라벨이있는 확인란을 만드는 방법은 무엇입니까?

클릭 가능한 라벨로 HTML 확인란을 만들려면 어떻게해야합니까 (라벨을 클릭하면 확인란이 켜지거나 꺼집니다)?

방법 1 : 라벨 태그 감싸기

확인란을 label태그 안에 넣으십시오 .

<label><input type="checkbox" name="checkbox" value="value">Text</label>

방법 2 : for특성 사용

for속성을 사용하십시오 (확인란과 일치 id).

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

참고 : ID는 페이지에서 고유해야합니다!

설명

다른 답변에서는 언급하지 않으므로 레이블은 최대 1 개의 입력을 포함하고 for속성을 생략 할 수 있으며 그 안에 입력 된 것으로 간주됩니다.

w3.org 에서 발췌 (내 강조와 함께) :

[for 속성]은 정의 된 레이블을 다른 컨트롤과 명시 적으로 연결합니다. 존재하는 경우,이 속성의 값은 동일한 문서에있는 다른 컨트롤의 id 속성 값과 같아야합니다. 없는 경우 정의중인 레이블은 요소의 내용과 연관됩니다.

레이블을 다른 제어와 내재적으로 연관 시키려면 제어 요소가 LABEL 요소의 컨텐츠 내에 있어야합니다 . 이 경우 LABEL에는 하나의 제어 요소 만 포함될 수 있습니다 . 레이블 자체는 관련 컨트롤 전후에 배치 될 수 있습니다.

이 방법을 사용하면 다음과 같은 장점이 있습니다 for.

• id모든 확인란에을 지정할 필요가 없습니다 (좋습니다!).

• 에서 추가 속성을 사용할 필요가 없습니다 <label>.

• 입력의 클릭 가능한 영역은 레이블의 클릭 가능한 영역이기도하므로 확인란을 제어 할 수있는 별도의 두 위치가 없습니다. <input>실제 레이블 텍스트와 얼마나 멀리 떨어져 있는지, CSS의 종류에 관계없이 하나만 그것에 적용하십시오.

CSS로 데모하기 :

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

레이블이 입력과 연결되어 있는지 확인하십시오.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

CSS 의사 요소를 사용하여 모든 확인란의 값 속성에서 레이블을 각각 선택하여 표시 할 수도 있습니다.
편집 : 이것은 웹킷 및 깜박임 기반 브라우저 (Chrome (ium), Safari, Opera ....) 및 대부분의 모바일 브라우저에서만 작동합니다. 여기에서는 Firefox 또는 IE가 지원 되지 않습니다 .
이는 웹킷 / 블링크를 앱에 임베드 할 때만 유용 할 수 있습니다.

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

모든 의사 요소 레이블을 클릭 할 수 있습니다.

데모 : http://codepen.io/mrmoje/pen/oteLl , + 요점

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

너무 작동합니다 :

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

이것은 당신을 도움이 될 것입니다 W3 스쿨 - 레이블

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

사용 label요소와 for체크 박스와 연관시킬 속성 :

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

확인란이있는 각도 재질 레이블에서

<mat-checkbox>Check me!</mat-checkbox>

이것을 사용하십시오

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});