Qual è il valore corretto per un attributo controllato di una casella di controllo HTML?

Sappiamo tutti come formare un input per la casella di controllo in HTML:

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

Quello che non so: qual è il valore tecnicamente corretto per una casella di controllo selezionata? Ho visto tutto questo funzionare:

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

La risposta è che non importa? Non vedo alcuna prova per la risposta contrassegnata come corretta qui dalla specifica stessa:

Le caselle di controllo (e i pulsanti di opzione) sono interruttori on / off che possono essere attivati ​​/ disattivati ​​dall'utente. Un interruttore è "on" quando è impostato l'attributo controllato dell'elemento di controllo. Quando viene inviato un modulo, solo i controlli "on" possono avere esito positivo. Diverse caselle di controllo in un modulo possono condividere lo stesso nome di controllo. Pertanto, ad esempio, le caselle di controllo consentono agli utenti di selezionare diversi valori per la stessa proprietà. L'elemento INPUT viene utilizzato per creare un controllo checkbox.

Cosa direbbe uno scrittore di specifiche è la risposta corretta? Fornisci risposte basate su prove.

A rigor di termini, dovresti mettere qualcosa di sensato - secondo le specifiche qui , la versione più corretta è:

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

Per HTML, è possibile anche utilizzare la sintassi dell'attributo vuoto , checked=""o anche semplicemente checked(di una più rigorosa XHTML, questo è non è supportato ).

In effetti, tuttavia, la maggior parte dei browser supporterà qualsiasi valore tra virgolette. Verranno verificati tutti i seguenti elementi:

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

E solo le seguenti opzioni saranno deselezionate:

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

Vedi anche questa domanda simile su disabled="disabled".

Specifiche HTML5 :

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

L'attributo del contenuto disabilitato è un attributo booleano.

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

La presenza di un attributo booleano su un elemento rappresenta il valore vero e l'assenza dell'attributo rappresenta il valore falso.

Se l'attributo è presente, il suo valore deve essere una stringa vuota o un valore che corrisponde a una corrispondenza maiuscole / minuscole ASCII per il nome canonico dell'attributo, senza spazi bianchi iniziali o finali.

Conclusione :

Sono validi, equivalenti e veri :

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

Non sono validi :

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

L'assenza dell'attributo è l'unica sintassi valida per false :

<input />

Raccomandazione

Se ti interessa scrivere XHTML valido, usa checked="checked", poiché <input checked>XHTML non valido (ma HTML valido) e altre alternative sono meno leggibili. Altrimenti, usa solo <input checked>perché è più corto.

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

Quelli sono ugualmente validi. E in JavaScript:

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

vuoi questo penso: checked='checked'

1. verificato
2. checked = ""

3. checked = "checked"

   sono equivalenti;

secondo la casella di controllo delle specifiche '---- ⓘ checked = "checked" o "" (stringa vuota) o vuoto Specifica che l'elemento rappresenta un controllo selezionato .---'

È una città piuttosto folle che l'unico modo per rendere falsi i check sia quello di omettere qualsiasi valore. Con Angular 1.x, puoi farlo:

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

che è molto più sano, se è necessario renderlo non controllato.

Penso che questo possa aiutare:

In secondo luogo, è necessario essere consapevoli del fatto che l'attributo controllato RITORNA una stringa "vero", "falso"
Perché è importante? Perché è necessario utilizzare il tipo corretto. Una stringa, non un booleano. Questo è importante anche quando si analizza la casella di controllo.
$('mycheckbox')[0].checked = "true"

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

È inoltre necessario rendersi conto che ATTRIBUTO "selezionato" serve per impostare inizialmente il valore della casella di controllo. Questo non fa molto una volta che l'elemento viene renderizzato nel DOM. Immagina che funzioni quando la pagina web viene caricata e inizialmente analizzata.
Vado con le preferenze di IE su questo:<input type="checkbox" checked="checked"/>

Infine, l'aspetto principale della confusione per una casella di controllo è che l'elemento dell'interfaccia utente della casella di controllo non è uguale al valore della proprietà dell'elemento. Non sono direttamente correlati. Se lavori in .net, scoprirai che l'utente "spuntando" una casella non riflette mai il valore bool effettivo passato al controller. Per impostare l'interfaccia utente, utilizzo entrambi $('mycheckbox').val(true);e$('mycheckbox').attr('checked', 'checked');

Bene, per usarlo non penso sia importante (simile a disabilitato e di sola lettura), personalmente uso controllato = "controllato" ma se stai cercando di manipolarli con JavaScript, usi vero / falso