Die Verwendung von Kontrollkästchen ist eine gute Option, wenn Sie Ihren Besuchern die Möglichkeit geben möchten, mehrere Elemente aus einer Gruppe auszuwählen Auswahl. In dieser Hinsicht funktioniert das Kontrollkästchen gegenüber einem Optionsfeld, mit dem Sie nur ein Element aus einer Gruppe von Auswahlmöglichkeiten auswählen können., In seiner einfachsten Form ist ein Kontrollkästchen einfach ein Eingabeelement, bei dem die Eigenschaft type auf checkbox gesetzt ist:
<input type="checkbox">Wie bei allen Eingabeelementen müssen Sie jedoch einen Namen definieren, damit er verwendbar ist – ohne einen Namen ist das Element beim Zurücksenden des Formulars an einen Server zur Verarbeitung nicht identifizierbar. Sie möchten auch einen Wert festlegen – dies ist der an den Server gesendete Wert, wenn das Kontrollkästchen aktiviert ist., Hier ist ein Beispiel:
<input type="checkbox" name="nameOfChoice" value="1">Wenn in diesem Beispiel das Kontrollkästchen aktiviert wurde und das Formular an einen Server gesendet wird, kann der Server das Formularelement“ nameOfChoice “ lesen und sein Wert ist 1.
Geprüft oder nicht geprüft?
Beachten Sie, dass bisher nicht alle Kontrollkästchen von Anfang an aktiviert wurden – der Benutzer müsste mit dem Kontrollkästchen interagieren, um seinen Status von nicht markiert in aktiviert zu ändern., Manchmal möchten Sie jedoch, dass das Kontrollkästchen standardmäßig aktiviert wird, um dem Benutzer eine Auswahl vorzuschlagen, oder weil Sie ein Kontrollkästchen mit einem Wert anzeigen, der einer vorhandenen Einstellung entspricht, z. B. aus einer Datenbank., Glücklicherweise ist dies sehr einfach-fügen Sie einfach das aktivierte Attribut zum Kontrollkästchen hinzu:
<input type="checkbox" name="nameOfChoice" value="1" checked>In den alten Tagen von XHTML, wo jedes Attribut immer einen Wert haben sollte, auch die booleschen Attribute, würde es so aussehen:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />Jeder Weg sollte in allen modernen Browsern funktionieren, aber der erste Weg ist kürzer und“HTML5-ähnlicher“.
Multiple choices
Bisher waren alle unsere Kontrollkästchen einfache Schalter, z. B. um zu definieren, ob eine Option ein-oder ausgeschaltet ist., Kontrollkästchen sind dafür großartig, aber wie bereits erwähnt, können sie auch verwendet werden, um dem Benutzer eine Auswahl möglicher Optionen zu ermöglichen. Lassen Sie mich Ihnen ein ordentliches Beispiel zeigen, in dem dies sinnvoll ist:
Beachten Sie, dass wir jetzt mehrere Kontrollkästchen haben, die jedoch alle denselben Namen („favorite_pet“), aber unterschiedliche Werte (z. B. „Hunde“) haben. Wenn dieses Formular an den Server zurückgesendet wird, werden alle diese Kontrollkästchen durch einen einzigen Namen dargestellt, der Wert ist jedoch ein Array von 0-3 Elementen., Wenn Sie Optionsfelder anstelle von Kontrollkästchen verwendet hätten, darf der Benutzer nur ein einzelnes Lieblingstier auswählen, aber mit Kontrollkästchen kann er keines von ihnen auswählen, alle oder einige von ihnen.
Beschriftungen für Kontrollkästchen
Wenn Sie das vorherige Beispiel getestet haben, werden Sie feststellen, dass wir Text neben ein Kontrollkästchen setzen können, aber es sind immer noch zwei separate Dinge – Sie können nicht auf den Text klicken, um das Kontrollkästchen auszulösen. Dies kann für den Benutzer sehr ärgerlich sein, aber zum Glück für uns ist es einfach zu lösen: Verwenden Sie einfach das Label-Element!, Hier ist ein einfaches Beispiel, um Ihnen den Unterschied zu zeigen:
Zwei Kontrollkästchen – eines ohne Etikett und eines mit. Sie sehen möglicherweise fast identisch aus, aber die mit der Beschriftung kann ausgelöst werden, indem Sie sowohl auf das eigentliche Kontrollkästchen als auch auf das angehängte Etikett klicken. Das ist schön, wenn Sie mit einer Maus auf einem Desktop-PC sitzen, aber noch besser, wenn Sie ein Touch-Gerät wie ein Smartphone verwenden, wo kleine Kontrollkästchen schwer mit dem Finger getroffen werden können.,
Das Label ist sehr einfach – es verwendet das for Attribut, um sich an ein Formularelement mit einem passenden id Attribut anzuhängen (beachten Sie, wie ich an beiden Stellen „Hunde“ habe).
Dynamisch mit einem Kontrollkästchen arbeiten
Genau wie jedes andere DOM-Element können Sie ein Kontrollkästchen mit JavaScript bearbeiten. In dieser Hinsicht könnte es interessant sein, zu überprüfen, ob ein Kontrollkästchen aktiviert ist oder nicht, und möglicherweise eine Logik hinzuzufügen, um zu steuern, wie viele Optionen ein Benutzer auswählen kann., Um Ihnen zu zeigen, wie dies möglich ist, habe ich ein vorheriges Beispiel (den Selektor „Lieblingstier“) um JavaScript-Magie erweitert:
Erlauben Sie mir, schnell durchzugehen, was dieser Code tut. Wir haben das gleiche Formular wie zuvor, aber wir haben jedem Kontrollkästchen einen Ereignishandler hinzugefügt, der dazu führt, dass sie eine JavaScript-Funktion (ValidatePetSelection) aufrufen, wenn der Benutzer darauf klickt. In dieser Funktion erhalten wir alle relevanten Kontrollkästchen mit der Funktion getElementsByName und durchlaufen sie dann, um zu sehen, ob sie aktiviert sind oder nicht – für jedes überprüfte Element fügen wir einer Zahl hinzu., Diese Nummer wird dann überprüft und wenn sie zwei überschreitet, alarmieren wir den Benutzer über das Problem (nur zwei Haustiere können ausgewählt werden) und geben dann false zurück. Wenn Sie false zurückgeben, wird verhindert, dass das Kontrollkästchen aktiviert wird.
Dies war nur ein einfaches Beispiel für die Arbeit mit Kontrollkästchen mit JavaScript. Sie können noch viel mehr tun, insbesondere wenn Sie ein JavaScript-Framework wie jQuery verwenden, mit dem Sie DOM-Elemente viel einfacher auswählen und bearbeiten können.,
Zusammenfassung
Mit den Kontrollkästchen können Sie wählbare Optionen für Ihre Benutzer einrichten – entweder um eine einzelne Einstellung ein-oder auszuschalten oder um mehrere Auswahlmöglichkeiten zu ermöglichen, wie im Beispiel für Lieblingstiere. Sie sollten Beschriftungen verwenden, um Ihr Kontrollkästchen und den beschreibenden Text miteinander zu verbinden, damit der Benutzer beim Bearbeiten des Kontrollkästchens auf einen größeren Bereich klicken kann – dies eignet sich auch zur Unterstützung von Technologien wie Bildschirmlesern für Sehbehinderte.
