Dieser Artikel demonstriert den Zweck, die Funktionalität und die Verwendung der „checked“-Eigenschaft des HTML DOM Input Radio in JavaScript.
Was ist die „checked“-Eigenschaft des HTML-DOM-Eingaberadios in JavaScript?
Die Eigenschaft „Eingaberadio“ „geprüft“ funktioniert auf den HTML-Formularen und Eingabefeldern, um den Status der Schaltfläche „Radio“ festzulegen und zu überprüfen.
Syntax (Geprüfte Eigenschaft festlegen)
radioObject. überprüft = WAHR | FALSCHGemäß der definierten Rückgabesyntax unterstützt die Eigenschaft „checked“ zwei Parameter, die unten aufgeführt sind:
- WAHR: Es bedeutet, dass das entsprechende Element überprüft wird.
- FALSCH: Es zeigt an, dass das entsprechende Element deaktiviert ist.
Syntax (Geprüfte Eigenschaft zurückgeben)
radioObject. überprüft In der obigen Syntax ist das „ radioObject „bezieht sich auf den HTML-Code“
Lassen Sie uns die oben definierten Syntaxen verwenden, um die Verwendung der Eigenschaft „checked“ des HTML DOM Input Radio anhand gegebener praktischer Beispiele zu erläutern.
Beispiel 1: Anwenden der „checked“-Eigenschaft des Eingaberadios Verwendung der grundlegenden Syntax
Im ersten Beispiel wird die Schaltfläche „Radio“ erstellt, um ihre Eigenschaft „checked“ mithilfe der definierten generalisierten Syntax festzulegen.
HTML Quelltext
Schauen Sie sich zunächst den angegebenen HTML-Code an:
< Körperstil = „Textausrichtung: Mitte“ >
< h2 > HTML DOM Input Radio Checked-Eigenschaft h2 >
Farbe : < Eingabetyp = 'Radio' Ausweis = 'Gelb' > Gelb < br >< br >
< Schaltfläche onclick = „colorCheck()“ > Überprüfen 'Gelb' Taste >
< Schaltfläche onclick = „colorUncheck()“ > Deaktivieren Sie das Kontrollkästchen 'Gelb' Taste >
In den obigen Codezeilen:
- Der '
Das Tag „“ definiert den Körperabschnitt, der am „Tag“ ausgerichtet ist. Center “. - Der ' „Tag gibt die erste Unterüberschrift an.
- Der '
„Tag fügt eine „Radio“-Schaltfläche hinzu, indem es den Eingabetyp angibt „ Radio ” mit einer zugewiesenen ID „ Gelb “. - Der '
„Tag fügt eine einfache Schaltfläche hinzu, die mit einem „“ verknüpft ist. onclick ”-Ereignis zur Ausführung des „ colorCheck() ”Funktion, auf die beim Klicken auf die Schaltfläche zugegriffen wird. - Ebenso ein anderes „
”-Tag erstellt eine Schaltfläche zum Aufrufen des „ colorUncheck() ”-Funktion beim Klicken auf die Schaltfläche.
JavaScript-Code
Folgen Sie als Nächstes dem angegebenen JavaScript-Code:
< Skript >Funktion colorCheck ( ) {
dokumentieren. getElementById ( 'Gelb' ) . überprüft = WAHR ;
}
Funktion FarbeDeaktivieren ( ) {
dokumentieren. getElementById ( 'Gelb' ) . überprüft = FALSCH ;
}
Skript >
Im obigen Codeausschnitt:
- Die erste Funktion „ colorCheck() „ nutzt die „ document.getElementById() ”-Methode zum Abrufen des Optionsfelds, verknüpfen Sie das „ überprüft ”-Eigenschaft und setzen Sie ihren Wert auf „true“.
- Andererseits ist die Funktion „ colorUncheck() „ legt den Wert von „ fest überprüft ”-Eigenschaft auf „false“ für die aufgerufene Optionsschaltfläche setzen.
Ausgang
Wie zu sehen ist, überprüft die Ausgabe die Schaltfläche „Radio“ beim Klicken auf die Schaltfläche (mit dem Namen „Prüfen“) und deaktiviert sie beim Klicken auf die Schaltfläche („Häkchen aufheben“).
Beispiel 2: Rückgabe des „geprüften“ Werts des Eingaberadios
In diesem Beispiel wird die Input Radio-Eigenschaft „checked“ angewendet, um den Status der Zielschaltfläche „Radio“ als booleschen Wert zurückzugeben.
HTML Quelltext
Betrachten Sie den folgenden HTML-Code:
< Körperstil = „Textausrichtung: Mitte“ >< h2 > HTML DOM Input Radio Checked-Eigenschaft h2 >
Farbe : < Eingabetyp = 'Radio' überprüft = WAHR Ausweis = 'Gelb' > Gelb < br >< br >
< Schaltfläche onclick = „colorCheck()“ > Überprüfen 'Gelb' Taste >
< p-ID = 'Probe' >< P >
Im obigen Codeblock ist das „ Radio Die Schaltfläche „“ wird erstellt und der Status der Schaltfläche „ überprüft Die Eigenschaft ist auf „ gesetzt. WAHR “. Anschließend wird die angegebene Funktion ebenfalls über das angehängte „“ aufgerufen. onclick ”-Ereignis mit der Schaltfläche.
JavaScript-Code
Betrachten Sie nun die folgenden Codezeilen:
< Skript >Funktion colorCheck ( ) {
Wo = dokumentieren. getElementById ( 'Gelb' ) . defaultChecked ;
dokumentieren. getElementById ( 'Probe' ) . innerHTML = T ;
}
Skript >
Im obigen Codeausschnitt:
- Definieren Sie eine Funktion mit dem Namen „ colorCheck() “.
- Wenden Sie in seiner Definition das „ document.getElementById() ”-Methode, um über die ID „gelb“ auf die Schaltfläche „Radio“ zuzugreifen und die „ defaultChecked ”-Eigenschaft, um den Standardwert der „ überprüft ” Attribut.
- Wenden Sie abschließend das „ document.getElementById() ”-Methode erneut, um den enthaltenen leeren Absatz abzurufen und den Status der „geprüften“ Eigenschaft anzuzeigen.
.
Ausgang
Bei der Analyse gibt das Ergebnis den Status der angegebenen „Radio“-Schaltfläche zurück, d. h. „ WAHR ” beim Klicken auf die Schaltfläche.
Abschluss
In JavaScript ist die Eigenschaft „checked“ des HTML-DOM-Eingaberadios nützlich, um den aktivierten Status der Schaltfläche „Radio“ festzulegen und zurückzugeben. Die Set-Syntax der Eigenschaft „checked“ funktioniert mit zwei Werten: WAHR ' Und ' FALSCH “. Andererseits erfordert die Rückgabesyntax keine Parameter. Dieser Artikel demonstrierte das Ziel, die Funktionalität und die Verwendung der „checked“-Eigenschaft des HTML DOM Input Radio in JavaScript.