Apa nilai yang tepat untuk atribut yang dicentang dari kotak centang HTML?


436

Kita semua tahu cara membentuk input kotak centang dalam HTML:

<input name="checkbox_name" id="checkbox_id" type="checkbox">

Apa yang saya tidak tahu - berapa nilai teknis yang benar untuk kotak centang yang dicentang? Saya telah melihat ini semua bekerja:

<input name="checkbox_name" id="checkbox_id" type="checkbox" checked>
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="on">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="yes">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="checked">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="true">

Apakah jawaban itu tidak masalah? Saya tidak melihat bukti untuk jawaban yang ditandai benar di sini dari spesifikasi itu sendiri:

Kotak centang (dan tombol radio) adalah sakelar hidup / mati yang dapat diaktifkan oleh pengguna. Sakelar "aktif" saat atribut yang dicentang elemen kontrol diatur. Saat formulir dikirimkan, hanya kontrol centang "on" yang bisa berhasil. Beberapa kotak centang dalam formulir dapat berbagi nama kontrol yang sama. Jadi, misalnya, kotak centang memungkinkan pengguna untuk memilih beberapa nilai untuk properti yang sama. Elemen INPUT digunakan untuk membuat kontrol kotak centang.

Apa yang akan dikatakan oleh penulis spec adalah jawaban yang benar? Harap berikan jawaban berbasis bukti.


Dalam ringkasan pertanyaan Anda menyebutkan nilai untuk atribut yang diperiksa, namun dalam deskripsi pertanyaan Anda membahas nilai yang benar untuk kotak centang yang dicentang. "Nilai" dari kotak centang berbeda dari atribut yang dicentang, saya percaya pada deskripsi pertanyaan Anda, Anda juga berarti nilai atribut, mungkin Anda ingin menyesuaikan deskripsi pertanyaan. Untuk "nilai" dari ulasan kotak centang stackoverflow.com/questions/14323899/...
melutovich

Jawaban:


451

Sebenarnya, Anda harus meletakkan sesuatu yang masuk akal - menurut spesifikasi di sini , versi yang paling benar adalah:

<input name=name id=id type=checkbox checked=checked>

Untuk HTML, Anda juga dapat menggunakan sintaks atribut kosong , checked=""atau bahkan hanya checked(untuk XHTML ketat, ini tidak didukung ).

Namun, secara efektif, sebagian besar browser akan mendukung hampir semua nilai di antara kutipan. Semua hal berikut akan diperiksa:

<input name=name id=id type=checkbox checked>
<input name=name id=id type=checkbox checked="">
<input name=name id=id type=checkbox checked="yes">
<input name=name id=id type=checkbox checked="blue">
<input name=name id=id type=checkbox checked="false">

Dan hanya yang berikut ini yang tidak dicentang:

<input name=name id=id type=checkbox>

Lihat juga pertanyaan serupa ini di disabled="disabled".


39
Ini salah. Jika Anda melihat spec , dikatakan: checked (checked)yang berarti "Atribut yang dicentang dapat memiliki nilai 'diperiksa'). Hanya checkedmerupakan nilai yang dapat diterima, tidak ada yang lain. Atribut Boolean memungkinkan Anda untuk menghilangkan segala sesuatu kecuali nilai sehingga checkeddapat diterima serta checked="checked".
Quentin

14
Halaman W3 HTML5-berorientasi mengatakan bahwa checked, checked="", dan checked="checked"OK. w3.org/TR/html-markup/input.checkbox.html
Ryan Williams

1
@ Quentin saya minta maaf, kalimat itu tidak masuk akal bagi saya. Apakah maksud Anda Anda dapat menghilangkan semua kecuali nama atribut? Karena jika Anda bisa menghilangkan segalanya kecuali nilainya , Anda bisa menulis "checked", tanpa nama atribut, dan membuatnya berfungsi dengan benar.
Hannele

4
@ Quentin tl, dr: Ini semantik, tetapi sintaks atribut kosong hanya menentukan nama atribut, bukan nilainya .
Hannele

1
Jika kotak centang tetap diperiksa (ketika reload halaman) meskipun menghilangkan yang boolean / atribut kosong checked , penggunaan autocomplete = "off" untuk menjaga browser Anda secara otomatis memeriksa itu.
tangani

58

Spesifikasi HTML5 :

http://www.w3.org/TR/html5/forms.html#attr-input-checked :

Atribut konten yang dinonaktifkan adalah atribut boolean.

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes :

Kehadiran atribut boolean pada elemen mewakili nilai sebenarnya, dan tidak adanya atribut mewakili nilai palsu.

Jika atribut ada, nilainya harus berupa string kosong atau nilai yang merupakan kecocokan tidak peka huruf ASCII untuk nama kanonik atribut, tanpa spasi spasi awalan atau jejak.

Kesimpulan :

Berikut ini adalah valid, setara, dan benar :

<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="ChEcKeD" />

Berikut ini tidak valid :

<input type="checkbox" checked="0" />
<input type="checkbox" checked="1" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="true" />

Tidak adanya atribut adalah satu-satunya sintaks yang valid untuk false :

<input />

Rekomendasi

Jika Anda peduli untuk menulis XHTML yang valid, gunakan checked="checked", karena <input checked>XHTML tidak valid (tetapi HTML yang valid) dan alternatif lain kurang dapat dibaca. Lain, gunakan saja <input checked>karena lebih pendek.


2
Saya telah memutuskan untuk memutar kembali untuk mengedit 2 dan menyimpan spec pertama. Sementara Contoh pertama adalah cara untuk pergi secara umum, saya merasa bahwa ini adalah aspek pembeda dari jawaban ini sehubungan dengan yang terbaik saat ini yang hanya memberikan contoh. Terima kasih atas sarannya :-)
Ciro Santilli 郝海东 冠状 病 六四 事件 事件

2
Saya pikir ini adalah jawaban yang benar, menekankan bahwa ketidakhadiran berarti salah. Sementara = "true" berfungsi, itu menyiratkan bahwa = "false" akan berfungsi seperti yang diinginkan dan tidak.
aamarks

35
<input ... checked />
<input ... checked="checked" />

Itu sama-sama valid. Dan dalam JavaScript:

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");

4
setAttribute memodifikasi markup DOM , penugasan properti tidak perlu.
user2864740

input.setAttribute("checked")TypeError: Gagal mengeksekusi 'setAttribute' on 'Element': 2 argumen diperlukan, tetapi hanya 1 yang hadir
Ivan Rave

@IvanRave Beberapa browser sangat bagus tentang hal itu, yang lain akan berfungsi dengan baik.
Niet the Dark Absol


5
  1. diperiksa
  2. checked = ""
  3. diperiksa = "diperiksa"

    adalah setara;


menurut spec checkbox '---- ⓘ checked = "checked" atau "" (string kosong) atau kosong Menentukan bahwa elemen tersebut mewakili kontrol yang dipilih .---'


2

Ini kota yang cukup gila bahwa satu-satunya cara untuk membuat false diperiksa adalah dengan menghilangkan nilai apa pun. Dengan Angular 1.x, Anda dapat melakukan ini:

  <input type="radio" ng-checked="false">

yang jauh lebih waras, jika Anda perlu membuatnya tidak dicentang.


2

Saya pikir ini dapat membantu:


Pertama-tama baca semua spesifikasi dari Microsoft dan W3.org.
Anda akan melihat bahwa pengaturan elemen aktual kotak centang perlu dilakukan pada PROPERTI UNSUR, bukan UI atau atribut.
$('mycheckbox')[0].checked

Kedua, Anda perlu menyadari bahwa atribut yang diperiksa MENGEMBALIKAN string "benar", "salah".
Mengapa ini penting? Karena Anda perlu menggunakan Jenis yang benar. Sebuah string, bukan boolean. Ini juga penting saat menguraikan kotak centang Anda.
$('mycheckbox')[0].checked = "true"

if($('mycheckbox')[0].checked === "true"){ //do something }

Anda juga perlu menyadari bahwa ATTRIBUTE "dicentang" adalah untuk menetapkan nilai kotak centang pada awalnya. Ini tidak banyak berfungsi setelah elemen diberikan ke DOM. Bayangkan ini berfungsi saat laman web dimuat dan awalnya diuraikan.
Saya akan pergi dengan preferensi IE yang satu ini:<input type="checkbox" checked="checked"/>

Terakhir, aspek utama kebingungan untuk kotak centang adalah bahwa elemen UI kotak centang tidak sama dengan nilai properti elemen. Mereka tidak berkorelasi langsung. Jika Anda bekerja di .net, Anda akan menemukan bahwa pengguna "memeriksa" kotak centang tidak pernah mencerminkan nilai bool yang sebenarnya diteruskan ke controller. Untuk mengatur UI, saya menggunakan keduanya $('mycheckbox').val(true);dan$('mycheckbox').attr('checked', 'checked');


Singkatnya, untuk kotak centang yang dicentang Anda perlu:
DOM awal: <input type="checkbox" checked="checked">
Properti Elemen: $('mycheckbox')[0].checked = "true";
UI: $('mycheckbox').val(true);dan$('mycheckbox').attr('checked', 'checked');


-3

Nah, untuk menggunakannya saya tidak berpikir masalah (mirip dengan dinonaktifkan dan hanya baca), secara pribadi saya menggunakan centang = "diperiksa" tetapi jika Anda mencoba untuk memanipulasi mereka dengan JavaScript, Anda menggunakan true / false


5
Tidak. Itu penting (itu penting untuk disableddan readonlyjuga) bahkan jika pemulihan kesalahan browser cukup bagus. Jika Anda ingin memanipulasi atribut dengan JS maka Anda harus tetap menggunakan checkedatau removeAttribute('checked'). The checked properti mengambil trueatau false.
Quentin
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.