클릭 가능한 라벨이 있는 체크박스를 작성하려면 어떻게 해야 합니까?

클릭 가능한 라벨이 있는 체크박스를 작성하려면 어떻게 해야 합니까?

클릭 가능한 라벨이 있는 HTML 체크박스를 작성하려면 어떻게 해야 합니까(라벨을 클릭하면 체크박스가 켜지거나 꺼집니다).

방법 1: 라벨 태그 랩

체크박스를 안에 랩합니다.label태그:

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

방법 2: 사용for기여하다

를 사용합니다.forattribute (체크박스와 일치)id):

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

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

설명.

다른 답변에서는 언급되지 않기 때문에 라벨은 최대 1개의 입력을 포함할 수 있으며, 이 입력은 생략할 수 있습니다.forAtribute, 그리고 Atribute 내의 입력에 대한 것으로 간주됩니다.

w3.org에서 발췌(중요한 내용):

[ for attribute ]는 정의되어 있는 라벨을 다른 컨트롤과 명시적으로 관련짓습니다.존재하는 경우, 이 속성의 값은 동일한 문서에 있는 다른 컨트롤의 id 속성의 값과 같아야 합니다.존재하지 않는 경우 정의 중인 라벨은 요소의 내용과 관련되어 있습니다.

라벨을 다른 컨트롤과 암묵적으로 관련지으려면 컨트롤 요소가 LABEL 요소의 내용 내에 있어야 합니다.이 경우 LABEL에는 1개의 제어 요소만 포함할 수 있습니다.라벨 자체는 관련 컨트롤 앞 또는 뒤에 배치할 수 있습니다.

이 방법을 사용하는 것은 다음과 같은 몇 가지 이점이 있습니다.for:

• 를 할당할 필요가 없습니다.id모든 체크박스로 이동합니다(좋습니다!).

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

• 입력의 클릭 가능 영역은 라벨의 클릭 가능 영역이기도 합니다.따라서 체크박스를 제어할 수 있는2개의 개별적인 장소는 없습니다.단 1개뿐입니다.이러한 영역과 간격은 상관없습니다.<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를 지원하지 않습니다.
이 기능은 웹킷/블링크를 앱에 내장할 때만 유용합니다.

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

[type=checkbox]:after {
  content: attr(value);
  margin: -3px 15px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
}

<input type="checkbox" value="My checkbox label value" />

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

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

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>

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

도움이 될 것입니다.W3 Schools - 라벨

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

동작도 합니다.

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

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

In Angular material label with 확인란

<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');
    });
});

언급URL : https://stackoverflow.com/questions/6293588/how-to-create-a-checkbox-with-a-clickable-label