Tıklanabilir bir etikete sahip bir onay kutusu nasıl oluşturulur?

Tıklanabilir bir etikete sahip bir HTML onay kutusunu nasıl oluşturabilirim (bu, etikete tıklandığında onay kutusunu açar / kapatır)?

Yöntem 1: Etiket Etiketini Sarın

Onay kutusunu bir labeletikete sarın :

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

Yöntem 2: forÖzniteliği Kullanma

forÖzelliği kullanın (onay kutusuyla eşleşin id):

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

NOT : Kimlik sayfada benzersiz olmalıdır!

açıklama

Diğer cevaplar bundan bahsetmediği için, bir etiket en fazla 1 girdi içerebilir ve forniteliği atlayabilir ve bunun içindeki girdi için olduğu varsayılacaktır.

W3.org'dan alıntı (benim vurgu ile):

[For niteliği] tanımlanmış etiketi başka bir kontrolle açıkça ilişkilendirir. Var olduğunda, bu özniteliğin değeri, aynı belgedeki başka bir denetimin id özniteliğinin değeri ile aynı olmalıdır. Yokken, tanımlanan etiket öğenin içeriğiyle ilişkilendirilir.

Bir etiketi dolaylı olarak başka bir kontrolle ilişkilendirmek için kontrol elemanının LABEL elemanının içeriğinde olması gerekir . Bu durumda, LABEL yalnızca bir kontrol elemanı içerebilir . Etiketin kendisi, ilişkili kontrolden önce veya sonra konumlandırılabilir.

Bu yöntemi kullanmanın bazı avantajları vardır for:

• idHer onay kutusuna bir atamaya gerek yok (harika!).

• İçinde ekstra özniteliği kullanmaya gerek yok <label>.

• Girişin tıklanabilir alanı da etiketin tıklanabilir alanıdır, bu nedenle onay kutusunu kontrol edebilecek iki ayrı yer yoktur - yalnızca bir tane, ne kadar uzak <input>ve gerçek etiket metni olursa olsun ve ne tür bir CSS olursanız olun uygula.

Bazı CSS ile demo:

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>

Etiketin girişle ilişkili olduğundan emin olun.

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

Ayrıca, onay kutunuzun tüm değer değerlerinden (sırasıyla) etiketlerinizi seçmek ve görüntülemek için CSS sözde öğelerini de kullanabilirsiniz.
Düzenleme: Bu yalnızca webkit ve göz kırpma tabanlı tarayıcılarla (Chrome (ium), Safari, Opera ....) ve dolayısıyla çoğu mobil tarayıcıyla çalışır. Hiçbir Firefox veya buraya IE desteği.
Bu, yalnızca webkit / blink uygulamalarınıza gömülürken faydalı olabilir.

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

Tüm sözde öğe etiketleri tıklanabilir olacaktır.

Demo: http://codepen.io/mrmoje/pen/oteLl , + Bunun özü

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

Aynı zamanda çalışır:

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

Bu size yardımcı olacaktır: W3Schools - Etiketler

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

Onay kutusuyla ilişkilendirmek için labelöğeyi ve forözniteliği kullanın:

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

Onay kutusuyla açısal malzeme etiketinde

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

Bunu kullan

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