Ulike måter å få verdi fra alternativknappen i JavaScript

I JavaScript kommer vi vanligvis over websider der det kreves for å få alternativknappverdien for å bekrefte om de angitte dataene er riktige eller ikke. For eksempel må du sende inn et skjema og varsle brukeren om dataene som er angitt er relevante. I slike tilfeller er det å få verdi fra alternativknappen i JavaScript en veldig nyttig funksjon for å lagre sluttbrukertiden og sikre datasikkerhet.

Ulike måter å få verdi fra alternativknappen i JavaScript

For å få verdi fra alternativknappen i JavaScript, kan følgende metoder brukes:

• “getElementById ()”Og“getElementsByName ()”Metoder
• “finne()”Metode
• “krysset av”Eiendom

Vi vil nå gå gjennom hver av de listede metodologiene en etter en!

Metode 1: Få verdi fra alternativknappen i JavaScript ved å bruke GetElementById () og GetElementsByName () Metoder

“getElementById ()”Metode henter et element med en spesifisert ID og“getElementsByName ()”Metode får tilgang til elementene med navnet som er spesifisert i sitt argument. Disse metodene kan brukes til å få både attributtenes knapp -ID og navneverdien for å få tilgang til dem og vise verdiene deres.

Syntaks

dokument.getElementById (ElementId)

Her, “ElementId”Refererer til den spesifiserte IDen til det ekstra elementet.

dokument.getElementsByName (navn)

I syntaks ovenfor, "Navn”Er elementets navneverdi.

Følgende eksempel vil forklare det uttalte konseptet tydelig.

Eksempel

I det følgende eksempel vil vi inkludere en overskrift i "”Tag med en linjepause som følger:

Velg hvilken som helst:

Nå, tilordne inngangstypen som "radio”Almennknappen, og spesifiser ID, navn og verdi:

Inkluder også en "merkelapp”For inngangstypen med en verdien som heter“E -post”:

E -post

Tilsvarende, gjenta de diskuterte trinnene for “Telefonnr." felt:

Telefonnr.

Etter det, inkluder en knapp som heter “Sende inn”For å få verdien ved å klikke:

Sende inn

Nå, hent den opprettede knappen ved å bruke “dokument.getElementById ()”Metode i JavaScript -filen. Bruk også en "ved trykk”Hendelse for å få tilgang til en funksjon. I funksjonen som er definert nedenfor, får du tilgang til begge inngangstypene ved å bruke “dokument.getElementsByName ()”Metode som“Navn”Attributt i begge inngangstypene er det samme.

Til slutt, bruk en "til”Løkke og få verdien av den valgte alternativknappen ved å bruke“krysset av”Eiendom og vis den i varslingsboksen:

dokument.getElementById ('Send').onClick = funksjon ()
var verdi = dokument.getElementsByName ('Kontakt');
for (var radio av verdi)
hvis (radio.krysset av)
Varsel (radio.verdi);

Utgangen fra programmet ovenfor vil resultere som følger:

Metode 2: Få verdi fra alternativknappen i JavaScript ved hjelp av Find () -metoden

“finne()”Metode får tilgang til verdien av det første elementet. Denne metoden kan implementeres for å få verdien av den sjekket alternativknappen ved å finne de spesifikke attributtene ved hjelp av det ekstra navnet.

Syntaks

Array.fra (verdi).finn (radio => radio.krysset av)

Her, “fra()”Metode vil få tilgang til det spesifiserte elementet,”finne()”Metoden vil samsvare med den med verdien av den sjekket alternativknappen, og den resulterende verdien vil bli returnert.

Se på følgende eksempel.

Eksempel

For HTML vil vi bruke den samme koden gitt i forrige metode. I vår JavaScript -fil vil vi hente knapp -IDen ved å bruke "dokument.getElementById ()”Metode med en“ved trykk”Hendelser som får tilgang til funksjonen, som for det første får begge inngangstypene som har samme navn attributt“kontakt" bruker "dokument.getElementsByName ()”Metode.

Til slutt, bruk "fra()”Metode for å få tilgang til verdien som er lagret i variabelen som heter“verdi", og "finne()”Metoden vil få den sjekket tilstanden til inngangen. Endelig "verdi”Eiendom vil returnere verdien av den spesifikke alternativknappen merket som sjekket:

dokument.getElementById ('Send').onClick = funksjon ()
var verdi = dokument.getElementsByName ("Kontakt");
var SelectValue = Array.fra (verdi).finn (radio => radio.krysset av);
Varsel (SelectValue.verdi);

Produksjon

Metode 3: Få verdi fra alternativknappen i JavaScript ved å bruke egenskapen til sjekket ()

“krysset av”Eiendom returnerer den sjekket tilstanden til den spesifiserte inngangstypen. Denne metoden kan brukes for å sjekke den sjekket tilstand for hver av radioknappene og returnere den tilsvarende verdien.

Syntaks

avkrysningsboksobjekt.krysset av

I den gitte syntaksen, “avkrysningsboksobjekt”Refererer til det spesifiserte objektet som skal sjekkes.

Eksempel

Først, legg til en "merkelapp" ved hjelp av "”Tag for å spesifisere en bestemt kategori etterfulgt av et linjepause i“
" stikkord:

Velg hvilken som helst:

Deretter gjentar de ovennevnte diskuterte prosedyrer for å spesifisere to inngangstyper som “radio”Og tilordne de gitte verdiene etterfulgt av en linjepause vist nedenfor:

Mann
Hunn

Inkluder også en inngangstype som heter “sende inn”For å få alternativknappverdien ved å klikke. En "ved trykk”Arrangement vil også bli lagt til for å få tilgang til den spesifiserte funksjonen ved å klikke på Send:

Etter det, erklærer en funksjon som heter “SendData ()”Og få elementene i de spesifiserte ID -ene og lagre dem i variablene som heter“få”Og“få1”. Til slutt, bruk en betingelse om at hvis alternativknappen refererer til “Mann”Eller“Hunn”Kjønn er tilgjengelig,“krysset av”Eiendom vil sjekke det, og“verdi”Eiendom vil hente den tilsvarende verdien mot hver av den sjekket alternativknappen:

funksjonsubmitData ()
Få = dokument.getElementById ("Kjønn")
get1 = dokument.getElementById ("Genderfem")
hvis (få.sjekket == true)
Varsel (dokument.getElementById ("Kjønn").verdi);

annet (get1.sjekket == true)
Varsel (dokument.getElementById ("Genderfem").verdi);

Produksjon

Vi har samlet forskjellige måter å få verdi fra en alternativknapp i JavaScript.

Konklusjon

For å få verdi fra alternativknappen i JavaScript, bruk "getElementById ()”Og“getElementsByName ()”Metoder for å få tilgang til begge attributtene samtidig og vise tilhørende verdier, eller“finne()”Metode for å få sjekket radioknappene ved å finne de spesifiserte attributtene basert på deres angitte navn eller“krysset av”Eiendomsmetode for å anvende en betingelse for hver av attributtene og få verdien. Denne bloggen er guidet relatert til prosedyren for å få verdi fra alternativknappen i JavaScript.