Was ist der richtige Wert für ein markiertes Attribut eines HTML-Kontrollkästchens?

436

Wir alle wissen, wie man eine Checkbox-Eingabe in HTML bildet:

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

Was ich nicht weiß - was ist der technisch korrekte Wert für ein aktiviertes Kontrollkästchen? Ich habe gesehen, wie das alles funktioniert:

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

Ist die Antwort, dass es keine Rolle spielt? Ich sehe keine Beweise für die Antwort, die hier als richtig markiert ist, aus der Spezifikation selbst:

Kontrollkästchen (und Optionsfelder) sind Ein / Aus-Schalter, die vom Benutzer umgeschaltet werden können. Ein Schalter ist eingeschaltet, wenn das geprüfte Attribut des Steuerelements gesetzt ist. Wenn ein Formular gesendet wird, können nur Steuerelemente des Kontrollkästchens "Ein" erfolgreich sein. Mehrere Kontrollkästchen in einem Formular können denselben Kontrollnamen haben. So können Benutzer mit Kontrollkästchen beispielsweise mehrere Werte für dieselbe Eigenschaft auswählen. Mit dem INPUT-Element wird ein Kontrollkästchen-Steuerelement erstellt.

Was würde ein Spezifikationsschreiber sagen, ist die richtige Antwort? Bitte geben Sie evidenzbasierte Antworten.

buley
quelle
In Ihrer Fragenzusammenfassung erwähnen Sie den Wert für das aktivierte Attribut. In der Fragenbeschreibung wird jedoch der richtige Wert für ein markiertes Kontrollkästchen erläutert. Der "Wert" des Kontrollkästchens unterscheidet sich vom aktivierten Attribut. Ich glaube, in Ihrer Fragenbeschreibung haben Sie auch den Wert des Attributs gemeint. Vielleicht möchten Sie die Fragenbeschreibung anpassen. Für den "Wert" eines Kontrollkästchens überprüfen Sie stackoverflow.com/questions/14323899/…
melutovich

Antworten:

451

Genau genommen sollten Sie etwas Sinnvolles angeben - gemäß der hier angegebenen Spezifikation ist die korrekteste Version:

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

Für HTML, können Sie auch das verwenden können leere Attribut Syntax , checked=""oder auch einfach checked(für strengere XHTML, wird dies nicht unterstützt ).

Tatsächlich unterstützen die meisten Browser jedoch nahezu jeden Wert zwischen den Anführungszeichen. Alle folgenden Punkte werden überprüft:

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

Und nur Folgendes wird deaktiviert:

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

Siehe auch diese ähnliche Frage auf disabled="disabled".

Hannele
quelle
39
Das ist falsch. Wenn Sie sich die Spezifikation ansehen , heißt es: checked (checked)"Das geprüfte Attribut kann den Wert 'geprüft' haben.) Nur checkedist ein akzeptabler Wert, keiner der anderen. Boolesche Attribute ermöglichen es Ihnen, alles außer dem Wert wegzulassen, der checkedakzeptabel ist." sowie checked="checked".
Quentin
14
Eine HTML5-orientierte W3 Seite sagt , dass checked, checked=""und in checked="checked"Ordnung ist. w3.org/TR/html-markup/input.checkbox.html
Ryan Williams
1
@ Quentin Ich entschuldige mich, dieser Satz macht für mich keinen Sinn. Meinten Sie, Sie können alles außer dem Namen des Attributs weglassen? Denn wenn Sie alles außer dem Wert weglassen könnten , könnten Sie einfach "checked"ohne den Attributnamen schreiben und es richtig funktionieren lassen.
Hannele
4
@Quentin tl, dr: Es ist Semantik, aber die leere Attributsyntax gibt nur den Namen des Attributs an, nicht den Wert .
Hannele
1
Wenn das Kontrollkästchen (beim erneuten Laden der Seite) aktiviert bleibt, obwohl das Attribut boolean / empty weggelassen wurdechecked , verwenden Sie autocomplete = "off" , um zu verhindern, dass Ihr Browser es automatisch überprüft.
behandeln
58

HTML5-Spezifikation :

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

Das deaktivierte Inhaltsattribut ist ein boolesches Attribut.

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

Das Vorhandensein eines booleschen Attributs für ein Element repräsentiert den wahren Wert, und das Fehlen des Attributs repräsentiert den falschen Wert.

Wenn das Attribut vorhanden ist, muss sein Wert entweder die leere Zeichenfolge oder ein Wert sein, bei dem der kanonische Name des Attributs nicht zwischen Groß- und Kleinschreibung unterschieden wird, ohne führende oder nachfolgende Leerzeichen.

Fazit :

Folgendes ist gültig, gleichwertig und wahr :

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

Folgendes ist ungültig :

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

Das Fehlen des Attributs ist die einzig gültige Syntax für false :

<input />

Empfehlung

Wenn Sie gültiges XHTML schreiben möchten, verwenden Sie checked="checked", da <input checked>ungültiges XHTML (aber gültiges HTML) und andere Alternativen weniger lesbar sind. Andernfalls verwenden <input checked>Sie es einfach, da es kürzer ist.

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
quelle
2
Ich habe beschlossen, ein Rollback durchzuführen, um 2 zu bearbeiten und die Spezifikation zuerst beizubehalten. Während Beispiele zuerst der Weg im Allgemeinen sind, denke ich, dass dies der differenzierende Aspekt dieser Antwort in Bezug auf die aktuellen Top-Antworten ist, die nur Beispiele geben. Vielen Dank für den Vorschlag :-)
Ciro Santilli 法轮功 冠状 病 六四 六四 法轮功
2
Ich denke, dies ist die richtige Antwort und betont, dass Abwesenheit falsch bedeutet. Während = "true" funktioniert, bedeutet dies, dass = "false" wie gewünscht funktioniert und nicht.
aamarks
35
<input ... checked />
<input ... checked="checked" />

Diese sind gleichermaßen gültig. Und in JavaScript:

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");
Niet the Dark Absol
quelle
4
setAttribute ändert das DOM- Markup , die Eigenschaftszuweisung muss nicht.
user2864740
input.setAttribute("checked")TypeError: 'setAttribute' für 'Element' konnte nicht ausgeführt werden: 2 Argumente erforderlich, aber nur 1 vorhanden
Ivan Rave
@IvanRave Einige Browser sind pedantisch, andere funktionieren einwandfrei.
Niet the Dark Absol
6

du willst das ich denke: checked='checked'

Johnny Craig
quelle
5
  1. überprüft
  2. geprüft = ""
  3. geprüft = "geprüft"

    sind gleichwertig;


gemäß Spezifikations- Kontrollkästchen '---- ⓘcheck = "geprüft" oder "" (leere Zeichenfolge) oder leer Gibt an, dass das Element ein ausgewähltes Steuerelement darstellt .---'

wengeezhang
quelle
2

Es ist eine ziemlich verrückte Stadt, dass die einzige Möglichkeit, die Prüfung falsch zu machen, darin besteht, Werte wegzulassen. Mit Angular 1.x können Sie Folgendes tun:

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

Das ist viel vernünftiger, wenn Sie es deaktivieren müssen.

Alexander Mills
quelle
2

Ich denke, das kann helfen:


Lesen Sie zuerst alle Spezifikationen von Microsoft und W3.org.
Sie werden sehen, dass die Einstellung des eigentlichen Elements eines Kontrollkästchens in der ELEMENT PROPERTY erfolgen muss, nicht in der Benutzeroberfläche oder dem Attribut.
$('mycheckbox')[0].checked

Zweitens müssen Sie sich bewusst sein, dass das aktivierte Attribut eine Zeichenfolge "true", "false" zurückgibt.
Warum ist das wichtig? Weil Sie den richtigen Typ verwenden müssen. Ein String, kein Boolescher Wert. Dies ist auch wichtig, wenn Sie Ihr Kontrollkästchen analysieren.
$('mycheckbox')[0].checked = "true"

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

Sie müssen auch wissen, dass das "aktivierte" ATTRIBUTE zum anfänglichen Einstellen des Werts des Kontrollkästchens dient. Dies macht nicht viel, sobald das Element im DOM gerendert wurde. Stellen Sie sich vor, dies funktioniert, wenn die Webseite geladen und anfänglich analysiert wird.
Ich werde mit der Präferenz des IE in diesem Fall gehen:<input type="checkbox" checked="checked"/>

Schließlich besteht der Hauptaspekt der Verwirrung bei einem Kontrollkästchen darin, dass das Kontrollkästchen-UI-Element nicht mit dem Eigenschaftswert des Elements identisch ist. Sie korrelieren nicht direkt. Wenn Sie in .net arbeiten, werden Sie feststellen, dass der Benutzer, der ein Kontrollkästchen "aktiviert", niemals den tatsächlichen Bool-Wert widerspiegelt, der an den Controller übergeben wird. Um die Benutzeroberfläche einzustellen, verwende ich sowohl $('mycheckbox').val(true);und$('mycheckbox').attr('checked', 'checked');


Kurz gesagt, für ein aktiviertes Kontrollkästchen benötigen Sie:
Initial DOM: <input type="checkbox" checked="checked">
Element Eigenschaft: $('mycheckbox')[0].checked = "true";
UI: $('mycheckbox').val(true);und$('mycheckbox').attr('checked', 'checked');

Jeremy
quelle
-3

Nun, um es zu benutzen, denke ich nicht, dass es wichtig ist (ähnlich wie deaktiviert und schreibgeschützt), persönlich benutze ich checked = "Checked", aber wenn Sie versuchen, sie mit JavaScript zu manipulieren, verwenden Sie true / false

Austin Best
quelle
5
Nein. Es ist wichtig (es ist wichtig für disabledund readonlyauch), auch wenn die Wiederherstellung von Browserfehlern ziemlich gut ist. Wenn Sie das Attribut mit JS bearbeiten möchten, sollten Sie weiterhin checkedoder verwenden removeAttribute('checked'). Die checked Eigenschaft nimmt trueoder false.
Quentin