Den här artikeln visar syftet, funktionaliteten och användningen av egenskapen HTML DOM Input Radio 'checked' i JavaScript.
Vad är egenskapen för HTML DOM Input Radio 'kontrollerad' i JavaScript?
Egenskapen Input Radio 'checked' fungerar på HTML-formulären och inmatningsfälten för att ställa in och kontrollera statusen för 'Radio'-knappen.
Syntax (Ange markerad egenskap)
radioObject. kontrollerade = Sann | falskEnligt den definierade retursyntaxen stöder egenskapen 'checked' två parametrar som listas nedan:
- Sann: Det representerar att motsvarande element är kontrollerat.
- falsk: Det indikerar att motsvarande element är avmarkerat.
Syntax (Returmarkerad egenskap)
radioObject. kontrollerade I ovanstående syntax, ' radioObject ' refererar till HTML '
Låt oss använda de ovan definierade syntaxerna för att förklara användningen av HTML DOM Input Radio 'checked' egenskap med hjälp av givna praktiska exempel.
Exempel 1: Tillämpning av ingångsradions 'markerade' egenskap Använder grundläggande syntax
I det första exemplet skapas knappen 'Radio' för att ställa in dess 'markerade' egenskap genom att använda den definierade generaliserade syntaxen.
HTML-kod
Titta först på den angivna HTML-koden:
< kroppsstil = 'text-align: center' >
< h2 > HTML DOM Input Radio Checked Property h2 >
Färg : < ingångstyp = 'radio' id = 'gul' > Gul < br >< br >
< knappen när du klickar = 'colorCheck()' > Kolla upp 'gul' knapp >
< knappen när du klickar = 'colorUncheck()' > Avmarkera 'gul' knapp >
I ovanstående kodrader:
- den '
'-taggen definierar kroppssektionen som är anpassad till ' Centrum ”. - den ' ”-taggen anger den första underrubriken.
- den '
'-taggen lägger till en 'Radio'-knapp genom att ange ingångstypen ' radio ' med ett tilldelat id ' gul ”. - den '
'-taggen lägger till en enkel knapp kopplad till en ' onclick ' händelse för att utföra ' colorCheck() ” funktion som kommer att nås vid knappklick. - På samma sätt, en annan '
'-taggen skapar en knapp för att anropa ' colorUncheck() ”-funktionen när du klickar på knappen.
JavaScript-kod
Följ sedan den givna JavaScript-koden:
< manus >funktion colorCheck ( ) {
dokumentera. getElementById ( 'gul' ) . kontrollerade = Sann ;
}
funktion färgAvmarkera ( ) {
dokumentera. getElementById ( 'gul' ) . kontrollerade = falsk ;
}
manus >
I kodavsnittet ovan:
- Den första funktionen ' colorCheck() ' använder ' document.getElementById() '-metoden för att hämta alternativknappen, associera ' kontrollerade '-egenskapen och ställ in dess värde till 'true'.
- Å andra sidan, funktionen ' colorUncheck() ' ställer in värdet på ' kontrollerade '-egenskapen till 'false' mot den öppnade radioknappen.
Produktion
Som framgår kontrollerar utgången 'Radio'-knappen när knappen (som heter 'Kontrollera') klickar och avmarkerar' vid knappen ('Avmarkera').
Exempel 2: Returnerar ingångsradions 'markerade' värde
Det här exemplet tillämpar egenskapen Input Radio 'checked' för att returnera tillståndet för den riktade 'Radio'-knappen som ett booleskt värde.
HTML-kod
Tänk på följande HTML-kod:
< kroppsstil = 'text-align: center' >< h2 > HTML DOM Input Radio Checked Property h2 >
Färg : < ingångstyp = 'radio' kontrollerade = Sann id = 'gul' > Gul < br >< br >
< knappen när du klickar = 'colorCheck()' > Kolla upp 'gul' knapp >
< p id = 'prov' >< sid >
I kodblocket ovan visas ' Radio '-knappen skapas och statusen för ' kontrollerade ' egenskapen är inställd på ' Sann ”. Därefter anropas på samma sätt den angivna funktionen via den bifogade ' onclick ” händelse med knappen.
JavaScript-kod
Tänk nu på följande kodrader:
< manus >funktion colorCheck ( ) {
var t = dokumentera. getElementById ( 'gul' ) . standardkontrollerad ;
dokumentera. getElementById ( 'prov' ) . innerHTML = t ;
}
manus >
I kodavsnittet ovan:
- Definiera en funktion som heter ' colorCheck() ”.
- I sin definition, tillämpa ' document.getElementById() '-metoden för att komma åt 'Radio'-knappen med dess id 'gul' och associera ' standardkontrollerad ' egenskap för att kontrollera standardvärdet för ' kontrollerade ' attribut.
- Till sist, använd ' document.getElementById() ”-metoden igen för att hämta det inkluderade tomma stycket och visa statusen för den “markerade” egenskapen.
.
Produktion
Som analyserat returnerar resultatet statusen för den givna 'Radio'-knappen, dvs. Sann ” när knappen klickar.
Slutsats
I JavaScript är egenskapen HTML DOM Input Radio 'checked' användbar för att ställa in och returnera den kontrollerade statusen för knappen 'Radio'. Den inställda syntaxen för egenskapen 'markerad' fungerar på två värden ' Sann ' och ' falsk ”. Å andra sidan kräver dess retursyntax ingen parameter. Den här artikeln demonstrerade syftet, funktionaliteten och användningen av egenskapen HTML DOM Input Radio 'checked' i JavaScript.