risposta-alla-domanda-sullo-sviluppo-web-bd.com

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

Sappiamo tutti come formare un input di checkbox 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 questi funzionano tutti: 

<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 ​​ dall'utente. Un interruttore è "attivo" quando l'elemento di controllo è selezionato l'attributo è impostato. Quando viene inviato un modulo, solo la casella di controllo "on" i controlli possono avere successo 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 seleziona diversi valori per la stessa proprietà. L'elemento INPUT è usato per creare un controllo casella di controllo.

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

400
buley

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

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

Per HTML, puoi anche usare la sintassi degli attributi empty , checked="", o anche semplicemente checked (per XHTML più rigoroso, questo è non supportato ).

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

<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 il seguente sarà deselezionato:

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

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

426
Hannele

HTML5 spec:

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

L'attributo di 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 la stringa vuota o un valore che corrisponde a ASCII senza distinzione tra maiuscole e minuscole per il nome canonico dell'attributo, senza spazi iniziali o finali.

Conclusione:

I seguenti sono valido, equivalente e vero:

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

I seguenti sono invalid:

<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> non è valido XHTML (ma HTML valido) e altre alternative sono meno leggibili. Altrimenti, basta usare <input checked> perché è più breve.

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

Quelli sono ugualmente validi. E in JavaScript:

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

vuoi questo penso: checked='checked'

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

    sono equivalenti;


secondo spec checkbox '---- ⓘ checked = "checked" or "" (stringa vuota) o vuoto Specifica che l'elemento rappresenta un controllo selezionato .--- '

5
wengeezhang

È una città piuttosto pazza che l'unico modo per rendere falso il check è omettere qualsiasi valore. Con 1.x angolare, puoi fare questo:

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

che è molto più sano di mente, se è necessario renderlo deselezionato.

2
Alexander Mills

Penso che questo possa aiutare:


Prima leggi tutte le specifiche di Microsoft e W3.org.
Si vedrà che l'impostazione dell'elemento effettivo di una casella di controllo deve essere eseguita su ELEMENT PROPERTY, non sull'interfaccia utente o sull'attributo.
$('mycheckbox')[0].checked

In secondo luogo, devi essere consapevole che l'attributo checked restituisce una stringa "true", "false"
Perché questo è importante? Perché è necessario utilizzare il tipo corretto. Una stringa, non un booleano. Questo è importante anche quando analizzi la tua casella di controllo.
$('mycheckbox')[0].checked = "true"

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

È inoltre necessario rendersi conto che l'ATTRIBUTO "controllato" serve inizialmente per impostare il valore della casella di controllo. Questo non fa molto quando l'elemento è reso al DOM. Immagina questo funzionamento quando la pagina web viene caricata e analizzata inizialmente.
Vado con preferenza di IE su questo: <input type="checkbox" checked="checked"/>

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


In breve, per una casella di controllo selezionata è necessario:
DOM iniziale: <input type="checkbox" checked="checked">
Proprietà elemento: $('mycheckbox')[0].checked = "true";
UI: $('mycheckbox').val(true); e $('mycheckbox').attr('checked', 'checked');

0
Jeremy