Dit artikel demonstreert het doel, de functionaliteit en het gebruik van de eigenschap HTML DOM Input Radio 'gecontroleerd' in JavaScript.
Wat is de eigenschap HTML DOM Input Radio 'gecontroleerd' in JavaScript?
De eigenschap Input Radio 'aangevinkt' werkt op de HTML-formulieren en invoervelden om de status van de knop 'Radio' in te stellen en te controleren.
Syntaxis (Gecontroleerde eigenschap instellen)
radioObject. gecontroleerd = WAAR | valsVolgens de gedefinieerde retoursyntaxis ondersteunt de eigenschap 'gecontroleerd' twee parameters die hieronder worden vermeld:
- WAAR: Het geeft aan dat het overeenkomstige element is aangevinkt.
- onwaar: Het geeft aan dat het corresponderende element niet is aangevinkt.
Syntaxis (Gecontroleerde eigenschap retourneren)
radioObject. gecontroleerd In de bovenstaande syntaxis is de ' radioObject ” verwijst naar de HTML “
Laten we de hierboven gedefinieerde syntaxis gebruiken om het gebruik van de eigenschap HTML DOM Input Radio 'gecontroleerd' uit te leggen met behulp van gegeven praktische voorbeelden.
Voorbeeld 1: de eigenschap Input Radio 'gecontroleerd' toepassen Basissyntaxis gebruiken
In het eerste voorbeeld wordt de knop 'Radio' gemaakt om de eigenschap 'gecontroleerd' in te stellen met behulp van de gedefinieerde algemene syntaxis.
HTML code
Kijk eerst naar de vermelde HTML-code:
< lichaamsstijl = 'tekst uitlijnen: centreren' >
< h2 > HTML DOM Input Radio gecontroleerd eigendom h2 >
Kleur : < invoertype = 'radio' ID kaart = 'geel' > Geel < br >< br >
< knop opklik = 'kleurcontrole()' > Rekening 'geel' knop >
< knop opklik = 'kleurUitvinken()' > Vink uit 'geel' knop >
In de bovenstaande coderegels:
- De '
” tag definieert het hoofdgedeelte dat is uitgelijnd met de “ centrum ”. - De ' ” tag specificeert de eerste subkop.
- De '
'-tag voegt een 'Radio'-knop toe door het invoertype ' radio ' met een toegewezen id ' geel ”. - De '
”-tag voegt een eenvoudige knop toe die is gekoppeld aan een “ bij klikken ”-gebeurtenis om de “ kleurCheck() '-functie die toegankelijk is na een klik op de knop. - Zo ook een andere “
” tag creëert een knop om de “ kleurUitvinken() ” functie na het klikken op de knop.
JavaScript-code
Volg vervolgens de gegeven JavaScript-code:
< script >functie colorCheck ( ) {
document. getElementById ( 'geel' ) . gecontroleerd = WAAR ;
}
function colorHaal het vinkje weg ( ) {
document. getElementById ( 'geel' ) . gecontroleerd = vals ;
}
script >
In het bovenstaande codefragment:
- De eerste functie “ kleurCheck() ” maakt gebruik van de “ document.getElementById() ” methode om het keuzerondje op te halen, associeer de “ gecontroleerd ” eigenschap en stel de waarde in op “true”.
- Aan de andere kant is de functie “ kleurUitvinken() ” stelt de waarde in van de “ gecontroleerd ”-eigenschap in op “false” tegen de geopende keuzerondje.
Uitgang
Zoals te zien is, controleert de uitvoer de 'Radio' -knop op de knop (genaamd 'Check') klikken en deselecteert 'op de knop ('Uncheck') klikken.
Voorbeeld 2: de 'gecontroleerde' waarde van de invoerradio retourneren
In dit voorbeeld wordt de eigenschap Input Radio 'checked' toegepast om de status van de gerichte 'Radio'-knop als een booleaanse waarde te retourneren.
HTML code
Beschouw de volgende HTML-code:
< lichaamsstijl = 'tekst uitlijnen: centreren' >< h2 > HTML DOM Input Radio gecontroleerd eigendom h2 >
Kleur : < invoertype = 'radio' gecontroleerd = WAAR ID kaart = 'geel' > Geel < br >< br >
< knop opklik = 'kleurcontrole()' > Rekening 'geel' knop >
< p id = 'steekproef' >< P >
In het bovenstaande codeblok, de ' Radio ' knop is gemaakt en de status van de ' gecontroleerd ” eigendom is ingesteld op “ WAAR ”. Daarna wordt op dezelfde manier de vermelde functie aangeroepen via de bijgevoegde ' bij klikken ”gebeurtenis met de knop.
JavaScript-code
Beschouw nu de volgende regels code:
< script >functie colorCheck ( ) {
waar = document. getElementById ( 'geel' ) . standaardGecontroleerd ;
document. getElementById ( 'steekproef' ) . binnenHTML = T ;
}
script >
In het bovenstaande codefragment:
- Definieer een functie met de naam ' kleurCheck() ”.
- Pas in zijn definitie de ' document.getElementById() '-methode om toegang te krijgen tot de knop 'Radio' met behulp van de id 'geel' en de ' standaard aangevinkt ” eigenschap om de standaardwaarde van de “ gecontroleerd ” attribuut.
- Pas ten slotte de ' document.getElementById() ' opnieuw gebruiken om de meegeleverde lege alinea op te halen en de status van de eigenschap 'gecontroleerd' weer te geven.
.
Uitgang
Zoals geanalyseerd, retourneert de uitkomst de status van de gegeven 'Radio' -knop, d.w.z. ' WAAR ” bij het klikken op de knop.
Conclusie
In JavaScript is de eigenschap HTML DOM Input Radio 'aangevinkt' handig om de aangevinkte status van de knop 'Radio' in te stellen en terug te sturen. De ingestelde syntaxis van de eigenschap 'gecontroleerd' werkt op twee waarden ' WAAR ' En ' vals ”. Aan de andere kant vereist de retoursyntaxis geen enkele parameter. Dit artikel demonstreerde het doel, de functionaliteit en het gebruik van de eigenschap HTML DOM Input Radio 'gecontroleerd' in JavaScript.