클릭 가능한 라벨이있는 체크 박스를 만드는 방법은 무엇입니까?

클릭 가능한 라벨이있는 체크 박스를 만드는 방법은 무엇입니까?

---

클릭 할 수있는 레이블이있는 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>

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

Demo:http://codepen.io/mrmoje/pen/oteLl, + The gist of it

---

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

---

It works too :

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

---

This should help you: W3Schools - Labels

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

---

Use the label element, and the for attribute to associate it with the checkbox:

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

---

Use this

<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