Hvordan velge en radioknapp som standard?

I HTML-form brukes alternativknappen der utvikleren må begrense brukeren til å gi eller velge bare ett alternativ. Hensikten med å sette knappen som standard er å sikre at brukeren må velge ett alternativ da det lar brukeren velge bare ett enkelt alternativ. Denne bloggen viser trinnvise instruksjoner for å velge en alternativknapp som standard.

Hvordan velge en radioknapp som standard?

Som standard ' krysset av ”-attributtet brukes for å velge alternativknappen. Hvis dette attributtet brukes på flere alternativknapper, blir den nyeste alternativknappen valgt som standard. Følg trinn-for-trinn-bloggen for å velge alternativknappen som standard:

Trinn 1: Lag radioknapper

I HTML-filen oppretter du tre alternativknapper og legger ved etiketter med dem:

< senter >

< h3 > Velg ditt erfaringsnivå: < / h3 >

< div >

< input type = 'radio' id = 'nybegynner' Navn = 'erfaring' verdi = 'nybegynner' >

< merkelapp til = 'nybegynner' > Nybegynner < / merkelapp >

< / div >

< div >

< input type = 'radio' id = 'mellomliggende' Navn = 'erfaring' verdi = 'mellomliggende' >

< merkelapp til = 'mellomliggende' > Middels < / merkelapp >

< / div >

< div >

< input type = 'radio' id = 'avansere' Navn = 'erfaring' verdi = 'avansere' >

< merkelapp til = 'avansere' > Avansere < / merkelapp >

< / div >

< / senter >

I kodebiten ovenfor:

Alternativknappen dannes ved å lage enkle ' '-tagger og angi typen til ' radio '.
Tildel hver alternativknapp 'navn', 'id' og 'verdi'.
Til slutt bruker du ' id ' i inntastingsfeltet for å legge ved ' '-taggen ved å bruke ' til ' Egenskap.

Etter å ha utført skriptet, utdata som nedenfor:

Figuren viser at alternativknappene vises, men at ingen av dem er valgt som standard.

Trinn 2: Velg som standard

« krysset av ”-attributtet brukes til å automatisk velge alternativknappen. Den velger bare ett alternativ. Det er derfor det er en bedre tilnærming å velge én alternativknapp som standard. Det begrenser brukeren til å velge riktig alternativ:

< div >

< input type = 'radio' id = 'nybegynner' Navn = 'erfaring' verdi = 'nybegynner' sjekket>

< merkelapp til = 'nybegynner' >Nybegynner< / merkelapp >

< / div >

I koden ovenfor er det krysset av attributtet brukes, og det tildeles kun det første inndatafeltet.

Etter å ha utført koden ovenfor ser nettsiden slik ut:

Utdataene viser at den første alternativknappen er valgt som standard ved hver oppdatering av siden.

Bonustips: Bruk JavaScript til å velge radioknappen som standard

For å velge en alternativknapp som standard ved hjelp av JavaScript, åpne alternativknappen ved å bruke id. Deretter velger du dets sjekkede attributt og setter dets boolske verdi satt til 'true' som i koden nedenfor:

< manus >

document.getElementById ( 'nybegynner' ) . krysset av = ekte;

< / manus >

I denne koden er ' nybegynner ” er ID-en til den alternativknappen som er valgt som standard.

Etter kompilering av skriptet, utdata som nedenfor:

I øyeblikksbildet ovenfor er den første alternativknappen valgt som standard ved bruk av JavaScript.

Konklusjon

For å velge en alternativknapp kan brukere bruke ' krysset av ' Egenskap. Hvis det avmerkede attributtet brukes i mer enn én alternativknapp, får alternativknappen den siste 'avmerket' attributtverdien. For å velge en alternativknapp som standard ved hjelp av JavaScript, åpne alternativknappen ved å bruke id. Denne bloggen har demonstrert hvordan du velger alternativknappen som standard.

Hvordan velge en radioknapp som standard?