Hvordan vælger man en radioknap som standard?

I HTML-form bruges alternativknappen, hvor udvikleren skal begrænse brugeren til at angive eller kun vælge én mulighed. Formålet med at indstille knappen som standard er at sikre, at brugeren skal vælge én mulighed, da den kun tillader brugeren at vælge en enkelt mulighed. Denne blog viser trin-for-trin instruktionerne for at vælge en alternativknap som standard.

Hvordan vælger man en radioknap som standard?

Som standard ' kontrolleret ”-attributten bruges til at vælge alternativknappen. Hvis denne attribut bruges på flere alternativknapper, vælges den seneste alternativknap som standard. Følg trin-for-trin-bloggen for at vælge alternativknappen som standard:

Trin 1: Opret radioknapper

I HTML-filen skal du oprette tre alternativknapper og vedhæfte etiketter med dem:

< centrum >

< h3 > Vælg dit erfaringsniveau: < / h3 >

< div >

< input type = 'radio' id = 'nybegynder' navn = 'erfaring' værdi = 'nybegynder' >

< etiket til = 'nybegynder' > Nybegynder < / etiket >

< / div >

< div >

< input type = 'radio' id = 'mellemliggende' navn = 'erfaring' værdi = 'mellemliggende' >

< etiket til = 'mellemliggende' > Mellemliggende < / etiket >

< / div >

< div >

< input type = 'radio' id = 'rykke' navn = 'erfaring' værdi = 'rykke' >

< etiket til = 'rykke' > Rykke < / etiket >

< / div >

< / centrum >

I ovenstående kodestykke:

Alternativknappen er dannet ved at skabe enkle ' ' tags og indstille dens type til ' radio ”.
Tildel hver radioknap 'navn', 'id' og 'værdi'.
Til sidst skal du bruge ' id ' i indtastningsfeltet for at vedhæfte ' ' tag ved hjælp af ' til ' attribut.

Efter udførelse af scriptet outputtet som nedenfor:

Figuren repræsenterer, at radioknapperne vises, men ingen af dem er valgt som standard.

Trin 2: Vælg som standard

Det ' kontrolleret ”-attributten bruges til at automatisk vælge alternativknappen. Den vælger kun én mulighed. Derfor er det en bedre fremgangsmåde at vælge en alternativknap som standard. Det begrænser brugeren til at vælge den rigtige mulighed:

< div >

< input type = 'radio' id = 'nybegynder' navn = 'erfaring' værdi = 'nybegynder' kontrolleret >

< etiket til = 'nybegynder' >Begynder< / etiket >

< / div >

I ovenstående kode er kontrolleret attribut bruges, og den tildeles kun til det første inputfelt.

Efter udførelse af ovenstående kode ser websiden således ud:

Outputtet illustrerer, at den første alternativknap er valgt som standard ved hver opdatering af siden.

Bonustip: Brug JavaScript til at vælge radioknappen som standard

For at vælge en alternativknap som standard ved hjælp af JavaScript, skal du åbne alternativknappen med id. Vælg derefter dens kontrollerede attribut og indstil dens boolske værdi til 'sand' som i nedenstående kode:

< manuskript >

document.getElementById ( 'nybegynder' ) . kontrolleret = rigtigt;

< / manuskript >

I denne kode er ' nybegynder ” er id'et for den alternativknap, som er valgt som standard.

Efter kompilering af scriptet outputtet som nedenfor:

I ovenstående snapshot er den første alternativknap valgt som standard ved hjælp af JavaScript.

Konklusion

For at vælge en alternativknap kan brugere bruge ' kontrolleret ' attribut. Hvis den markerede attribut bruges i mere end én alternativknap, får alternativknappen den seneste 'kontrollerede' attributværdi. For at vælge en alternativknap som standard ved hjælp af JavaScript, skal du åbne alternativknappen med id. Denne blog har med succes demonstreret, hvordan man vælger alternativknappen som standard.

Hvordan vælger man en radioknap som standard?