Hvordan få verdi av valgt alternativknapp ved hjelp av JavaScript?

Radioknapper er et av de mest avgjørende elementene i HTML når du prøver å bygge et skjema. Radioknappene tilbyr brukeren noen alternativer som han bare kan velge et enkelt alternativ.

Normalt, når vi ønsker å få verdien av et element fra en HTML -webside, bruker vi ganske enkelt verdien for det elementet i JavaScript. Men vi kan ikke gjøre det med radioknapper. Årsaken er at det ikke er en god praksis å hente verdiene til individuelle radioknapper. Derfor vil vi bare ha en verdi, og det er av den valgte alternativknappen

Prosessen med å hente verdien av en valgt alternativknapp inkluderer følgende trinn:

• Først: Få en referanse til gruppen av radioknapper i JavaScript
• For det andre: Fra listen over radioknapper, filtrer den med "krysset av”Eiendom
• For det tredje: Få verdien til den filtrerte alternativknappen

La oss skape et eksempel for å vise frem disse trinnene.

Trinn 1: Sett opp en HTML-webside

Lag en HTML -webside med følgende linjer inni den:

Hva vil du lære?

Gitar

Fiolin

Cajon

Lære

Følgende ting skjer i koden som er nevnt ovenfor:

• Vi oppretter en beholder der vi vil legge radioknappene våre og "lære" -knappen
• Så spør vi brukeren om instrumentet han vil lære
• Valgene er gitt i form av radioknapper
• Hver alternativknapp har sin egen unike id og verdi Men det samme Navn å gruppere dem
• Deretter en Taggen legges til for hver alternativknapp
• En knapp er lagt til på nettsiden, for å sende inn brukerens valg.

Fyr opp HTML -nettsiden, så får du denne utdataene på nettleseren din.

Vi har radioknapper, og læreknappen vår midt på websiden.

Trinn 2: Skriv JavaScript -kode for å vise brukerens valg

Vi ønsker å utføre en funksjon i skriptfilen når du klikker på "Lære”-Knappen. Derfor legger vi til følgende linjer:

dokument.getElementById ("Lær").onClick = funksjon ()
// Neste kode ville komme inn i henne
;

Inne i denne funksjonen, få DOM -referansen til vår radioknappegruppe ved å bruke følgende linje

var radioButtonGroup = dokument.getElementsByName ("Instrument");

Etter det, filtrer denne gruppen av radioknapper for å finne den som er sjekket og lagre den inne i en annen variabel ved hjelp av følgende linje

var checkedRadio = matrise.Fra (RadiobuttonGroup).finn ((radio) => radio.krysset av);

Til slutt, be brukeren om instrumentet han \ hun vil lære ved å bruke varslingsfunksjonen

Varsel ("Du har valgt:" + CheckedRadio.verdi);

Den komplette skriptfilen ser slik ut

dokument.getElementById ("Lær").onClick = funksjon ()
var radioButtonGroup = dokument.getElementsByName ("Instrument");
var checkedRadio = matrise.Fra (RadiobuttonGroup).finne(
(radio) => radio.krysset av
);
Varsel ("Du har valgt:" + CheckedRadio.verdi);
;

Trinn 3: Testing av skriptet

Oppdater websiden, velg en alternativknapp og klikk deretter på knappen som sier "Lære”. Du bør få følgende utdata:

Du har hentet verdien fra en sjekket alternativknapp og varslet brukeren om hans valg.

Innpakning

For å få verdien av en valgt alternativknapp i JavaScript, må vi følge et sett med trinn. Første trinn er å få en JavaScript -referanse til radioknapper med samme navn. Etter det ønsker vi å filtrere alternativknappen som har merket egenskapen merket. Etter det, bruk radioknappen Store for å få verdien ved å bruke verdiattributtet til HTML -elementet. Da kan du jobbe med den hentede verdien.