Bagaimana cara membuat kotak centang dengan label yang dapat diklik?


Jawaban:


1916

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>


14
Senang, tapi tolong edit lagi. Ini hanya baik untuk kotak centang. Mari kita tidak mendorong orang untuk membungkus input mereka yang lain dengan label, karena itu merusak sistem grid dan respon seluler akan lebih sulit didapat
Max

1
Jika seseorang dapat menjelaskan komentar @ John pergi, silakan lakukan, karena itu tidak masuk akal sama sekali bagi saya.
Wesley Murch

16
@ John itu adalah panduan markup khusus untuk bootstrap. Jika Anda tidak menggunakan kerangka kerja, atau menggunakan kerangka kerja yang berbeda, itu akan baik-baik saja. Terima kasih balasannya.
Wesley Murch

3
@ John Pada halaman yang Anda tautkan, contoh bootstrap semua bungkus kotak centang dengan label, saya tidak melihat peringatan seperti yang Anda tunjukkan sama sekali, mungkin itu tidak lagi relevan dengan bootstrap terbaru.
user2144406

2
Seperti yang saya pelajari hari ini, jangan mencampur Metode 1 dan Metode 2. Jika Anda membungkus kotak centang dalam label DAN memasukkan untuk, maka mengklik label tidak akan memicu kotak centang.
BBlake

50

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>

1
Saya bingung dengan kenyataan bahwa Anda memberi kedua kotak centang nama yang sama, dan nilai yang berbeda. Apakah itu disengaja?
LarsH

2
@ LarsH - Ya, itulah cara Anda membuat grup kotak centang.
Quentin

Terima kasih. Saya sedang melihat w3.org/wiki/HTML/Elements/input/checkbox dan itu tidak membantu dalam hal itu.
LarsH

2
Dengan PHP, tidakkah itu membuat $ _POST ['foo'] selalu memiliki salah satu dari dua nilai maksimum pada satu waktu? Bahkan jika keduanya diperiksa. Apa itu grup kotak centang?
jeromej

2
@JeromeJ: Untuk php untuk menanganinya dengan benar, Anda harus menambahkan tanda kurung persegi untuk nama, misalnya: <input type="checkbox" name="foo[]" value="bar" ...>. Ini akan memberi Anda array yang berisi nilai-nilai semua kotak yang dicentang (yang memiliki nama ini). Misalnya $_POST['foo'][0]mungkin bardan $_POST['foo'][1]mungkin baz(jika keduanya dicentang).
Levite

11

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


Benar. Gecko dan Trident dan gecko sepertinya tidak suka ini. Ini hanya akan bekerja dengan Webkit dan Blink. Saya akan memperbarui jawabannya
mrmoje

3
Diturunkan. Meskipun mungkin, ini cara yang buruk - tidak berfungsi pada banyak browser, tidak baik untuk aksesibilitas.
James Billingham

Selain masalah kompatibilitas, solusi ini tidak semantik seperti jawaban teratas karena tidak ada hubungan langsung dalam markup antara <label> dan <input>
deadboy

"Ini berfungsi di Webkit / Blink" berbau seperti bug menggunakan ( stackoverflow.com/questions/2587669/… ) sehingga mungkin berhenti bekerja kapan saja.
Xenos

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

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

1
Karena mungkin membingungkan bagi beberapa pembaca, Anda harus mengubah nilai nameatribut ke sesuatu yang berbeda dari nilai yang ada di dalam fordan idatribut, karena keduanya terkait, sedangkan nametidak (itu masih wajib untuk dimasukkan, saya percaya masih harus dimasukkan, saya percaya juga) .
Dzhuneyt

3

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>

Anda dapat mengabaikan fordan idatribut dalam contoh Anda, karena labeltag hanya memiliki satu elemen input di dalamnya.
Dzhuneyt

2

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>


0

Gunakan labelelemen, dan foratribut untuk mengaitkannya dengan kotak centang:

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



-7

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

9
Tidak perlu menggunakan JavaScript untuk melakukan ini. Itu dibangun ke dalam HTML.
Lasse Bunk

4
@LasseBunk, kalau saja itu hanya JavaScript, tetapi seluruh pustaka jQuery diperlukan agar ini berfungsi. Mari kita lihat apakah seseorang dapat menemukan solusi Angular 2.
laurent
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.