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

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.

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

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.

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

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

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

du willst das ich denke: checked='checked'

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 .---'

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.

Ich denke, das kann helfen:

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');

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