it-swarm-id.com

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

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 sebagai benar di sini dari spek itu sendiri:

Kotak centang (dan tombol radio) adalah sakelar hidup/mati yang dapat diaktifkan oleh pengguna. Sakelar "aktif" saat elemen kontrol dicentang atribut diatur. Saat formulir dikirimkan, hanya kotak centang "on" kontrol dapat menjadi sukses. Beberapa kotak centang dalam formulir dapat dibagikan nama kontrol yang sama. Jadi, misalnya, kotak centang memungkinkan pengguna untuk pilih 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.

400
buley

Sebenarnya, Anda harus meletakkan sesuatu yang masuk akal - sesuai dengan spec 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 checked (untuk XHTML yang lebih ketat, ini tidak didukung ).

Namun, secara efektif, sebagian besar browser akan mendukung hampir semua nilai di antara tanda kutip. 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" .

426
Hannele

HTML5 spec:

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 case-insensitive ASCII untuk nama kanonik atribut, tanpa spasi spasi awalan atau jejak.

Kesimpulan:

Berikut ini adalah valid, ekuivalen, dan benar:

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

Berikut ini adalah 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 ingin menulis XHTML yang valid, gunakan checked="checked", karena <input checked> tidak valid XHTML (tetapi HTML yang valid) dan alternatif lain kurang dapat dibaca. Lain, cukup gunakan <input checked> karena lebih pendek.

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

Itu sama-sama valid. Dan dalam JavaScript:

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

anda ingin ini saya pikir: checked='checked'

7
Johnny Craig
  1. diperiksa 
  2. checked = ""
  3. diperiksa = "diperiksa"

    adalah setara;


sesuai dengan spec kotak centang '---- ⓘ checked = "checked" atau "" (string kosong) atau kosong Menentukan bahwa elemen tersebut mewakili kontrol yang dipilih .--- '

5
wengeezhang

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

Saya pikir ini dapat membantu:


Pertama baca semua spesifikasi dari Microsoft dan W3.org.
Anda akan melihat bahwa pengaturan elemen kotak centang yang sebenarnya perlu dilakukan pada PROPERTI ELEMEN, 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 yang "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.
Aku 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 aktual yang diteruskan ke controller . $('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');

0
Jeremy