Bagaimana cara membuat kotak centang dengan label yang dapat diklik?

Bagaimana saya bisa membuat kotak centang HTML dengan label yang dapat diklik (ini berarti bahwa mengklik pada label mengaktifkan / menonaktifkan kotak centang)?

Metode 1: Bungkus Tag Label

Bungkus kotak centang di dalam labeltag:

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

Metode 2: Gunakan forAtribut

Gunakan foratribut (cocok dengan kotak centang id):

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

CATATAN : ID harus unik di halaman!

Penjelasan

Karena jawaban lain tidak menyebutkannya, label dapat memasukkan hingga 1 input dan menghilangkan foratribut, dan akan dianggap bahwa itu untuk input di dalamnya.

Kutipan dari w3.org (dengan penekanan saya):

[Atribut for] secara eksplisit mengaitkan label yang didefinisikan dengan kontrol lain. Saat ada, nilai atribut ini harus sama dengan nilai atribut id dari beberapa kontrol lain dalam dokumen yang sama. Saat tidak ada, label yang ditentukan terkait dengan konten elemen.

Untuk mengaitkan label dengan kontrol lain secara implisit, elemen kontrol harus berada di dalam konten elemen LABEL . Dalam hal ini, LABEL hanya dapat berisi satu elemen kontrol. Label itu sendiri dapat diposisikan sebelum atau setelah kontrol yang terkait.

Menggunakan metode ini memiliki beberapa kelebihan dibandingkan for:

• Tidak perlu menetapkan satu iduntuk setiap kotak centang (hebat!).

• Tidak perlu menggunakan atribut tambahan di <label>.

• Area input yang dapat diklik juga merupakan area label yang dapat diklik, jadi tidak ada dua tempat terpisah untuk mengontrol kotak centang - hanya satu, tidak peduli seberapa jauh jaraknya <input>dan teks label sebenarnya, dan tidak peduli apa pun jenis CSS yang Anda gunakan. terapkan untuk itu.

Demo dengan beberapa 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>

Pastikan label dikaitkan dengan input.

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

Anda juga dapat menggunakan elemen pseudo CSS untuk memilih dan menampilkan label Anda dari semua atribut nilai kotak centang Anda (masing-masing).
Sunting: Ini hanya akan berfungsi dengan browser berbasis webkit dan blink (Chrome (ium), Safari, Opera ....) dan dengan demikian sebagian besar browser seluler. Tidak ada Firefox atau dukungan IE di sini.
Ini mungkin hanya berguna ketika menyematkan webkit / berkedip ke aplikasi Anda.

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

Semua label elemen pseudo akan dapat diklik.

Demo: http://codepen.io/mrmoje/pen/oteLl , + Intinya

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

Ini juga berfungsi:

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

Ini akan membantu Anda: W3Schools - Label

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

Gunakan labelelemen, dan foratribut untuk mengaitkannya dengan kotak centang:

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

Di label bahan Sudut dengan kotak centang

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

Gunakan ini

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