JavaScript kann verwendet werden, um das Verhalten von HTML -Elementen einer Seite zu manipulieren. Eines der am häufigsten verwendeten Elemente wäre das Eingabe -Tag . Die Eingabe wird verwendet, um eine interaktive Benutzeroberfläche (UI) zu erstellen, um Informationen vom Benutzer zu entnehmen.

Das Eingabe -Tag hat verschiedene Typen. Einige dieser Typen enthalten eine Schaltfläche, Bild, Kontrollkästchen, Radio-Box usw. Anders als Typen gibt es verschiedene Attribute des Eingabetikett . Diese Attribute sind beispielsweise mit bestimmten Typen kompatibel überprüft Das Attribut ist nicht mit dem Tastentyp kompatibel, da es nur mit einem Kontrollkästchen oder einem Optionsfeld kompatibel ist.

Kontrollkästchen und überprüfte Eigenschaft

Wenn Sie ein Formular zum Aufnehmen von Informationen vom Benutzer erstellen, verwenden Sie ziemlich oft einen Eingabetyp mit dem Namen a Kontrollkästchen. Das Kontrollkästchen Nutzen Sie nur ein Attribut, und das ist die überprüfte Attribut \ Eigenschaft. Sehr kurz werden wir sehen, wie dieses Kontrollkästchen funktioniert, und dann werden wir es mit JavaScript ordnungsgemäß manipulieren.

Beginnen wir mit zunächst ein einfaches Kontrollkästchen in einer HTML -Seite. Verwenden Sie den folgenden Code zum Erstellen eines Kontrollkästchen:

Dies ist ein Kontrollkästchen

Wie Sie sehen können, haben wir ein Eingabetag erstellt und gab ihm einen Namen und eine ID und den Text, der daneben angezeigt wird.

Der vollständige Code -Snippet für eine bessere Demonstration würde so laufen:

LinuxHint -Tutorial

Kontrollkästchen -geprüfte Eigenschaft Manipulation mit JavaScript


Dies ist ein Kontrollkästchen

Die Ausgabe ist:

Wie wir sehen können, werden auf dem Bildschirm ein Kontrollkästchen angezeigt. Fügen wir die Eigenschaft "Checked" hinzu, damit das Kontrollkästchen bereits markiert ist, wenn die Seite geladen wird. Verwenden Sie die folgende Zeile in Ihrem Code zum Hinzufügen der Eigenschaft "Checked":

Dies ist ein Kontrollkästchen

Wir können dies bestätigen, indem wir auch in die Entwicklerwerkzeuge des Browsers und dann in die Registerkarte Eigenschaften gehen, wo wir die Eigenschaft sehen könnenüberprüftUnd sein Wert wie:

Wir können die geprüfte Eigenschaft ändern, indem wir auf das Kontrollkästchen selbst klicken, z. B.:

Aber was ist, wenn wir JavaScript verwenden möchten, um die überprüfte Eigenschaft zu manipulieren.

So ändern Sie die überprüfte Eigenschaft mit JavaScript

Um JavaScript zu verwenden, um Elemente auf der HTML zu ändern, werden wir einen Auslöser erstellen. Ein Auslöser kann alles sein, es kann ein Ereignis, ein Mausgelände oder ein Knopf sein. Wir benötigen zwei Knöpfe. Eines davon wird die "verändern"überprüftDer Wert der Eigenschaft für True und der andere, um es in "Falsch" zu ändern

Erstellen wir zunächst die beiden Schaltflächen mit den folgenden Zeilen.

Überprüfen
Deaktivieren

Diese Zeilen würden die beiden Schaltflächen auf dem Bildschirm erstellen wie:

Zeit, diese Schaltflächen mit den Funktionen zu binden, die wir innerhalb der definiert haben “ONCLICK" Eigentum.

Verwenden Sie die folgenden Befehle im Skript -Tag, um diese beiden Funktionen zu erstellen, um diese beiden Funktionen zu erstellen .

Führen Sie die Datei erneut aus und klicken Sie auf diese Schaltflächen, um das Verhalten des Kontrollkästchens zu untersuchen.

Sie werden dieses Verhalten haben.

Wie Sie sehen können, ändern wir jetzt die überprüft Der Wert der Eigenschaft des Kontrollkästchens mit JavaScript.

Abschluss

JavaScript kann verwendet werden, um den Wert der zu manipulierenüberprüftEigentum von a Kontrollkästchen in der Schild. HTML -Elemente werden häufig mit JavaScript manipuliert, und diese Manipulationen werden häufig als Folge einer Aktion durchgeführt, möglicherweise nachdem der Benutzer eine Taste gedrückt oder irgendwo auf dem Bildschirm klickt. Wir haben kurz die Kontrollkästchen, die Erstellung, wie sie erstellt werden, wie hoch sind, wie hoch sind und wie diese Eigenschaft manipuliert werden kann, wenn der Benutzer mit JavaScript eine Taste drückt.