Hvordan ta innspill med radioknapper i JavaScript

JavaScript er et programmeringsspråk som gir våre webapplikasjoner og websider muligheten til å tenke og handle ved å gjøre dem interaktive. JavaScript tilbyr amerikanske radioknapper som brukes til å sette opp en gruppe relaterte alternativer med bare en alternativknapp valgt om gangen. Radioknapper brukes stort sett i former og brukes med elementet i HTML. Radioknapper er veldig nyttige når utvikleren vil at brukeren skal velge bare ett alternativ fra de gitte flere alternativene.

For eksempel godtar webapplikasjonen din enten e -post eller telefonnummer, og du vil at brukeren skal velge en og ikke begge deler. Radioknapper er nyttig med å oppnå denne oppgaven. Først vil vi definere radioknapper i HTML og deretter gå mot JavaScript slik at vi kan ta innspill med radioknapper.

Html

Velg ditt foretrukne alternativ

E -post

Telefon

I HTML -koden ovenfor brukte vi to radioknapper og ga navnet på kontakten. Det er nødvendig å gi samme navn til samme gruppe radioknapper slik at bare en kan velges på en gang. Vi brukte også etiketter for å merke inndata -radioknappene våre. Vi vil se følgende utdata i nettleseren vår når vi kjører koden ovenfor:

Vi kan også se at bare en alternativknapp kan velges til enhver tid. Før vi går mot JavaScript -delen, la oss også sette i gang en innsending i HTML, slik at vi senere kan lytte etter hendelser på denne knappen.

Velg ditt foretrukne alternativ

E -post

Telefon
Sende inn

Vi innledet en knapp og ga den en onklick -hendelse slik at når brukeren klikker på sende inn Knappen, HandleClick () -funksjonen vil begynne å utføre. Til slutt refererte vi til vårt JavaScript -filnavn ved hjelp av manus tag og bruke src attributt bestått filnavnet som er kode.JS.

JavaScript

Nå som vi har definert to radioknapper i HTML, la oss ta neste skritt mot å få innspill fra alternativknappen, og det er derfor nødvendig å først bestemme hvilken alternativknapp som er aktiv eller valgt. For dette formålet vil vi bruke QuerySectorAll () som vil velge alle radioknappene med navnet Kontakt.

funksjonshandleClick ()
Constradiobuttons = dokument.querySelectorAll ('input [name = "contact"]');
LetSelectedValue;
for (constboFradiobuttons)
if (rb.krysset av)
SelectedValue = RB.verdi;
gå i stykker;


if (valgtvalue)
Varsel (valgt verdi);

ellers
Varsel ("Vennligst velg et alternativ");

I ovennevnte JavaScript opprettes HandleClick () -funksjonen i starten som kalles fra HTML sende inn knapp. Etter dette ved å bruke QuerySelectorAll (”Input [name =” Contact ”]”) Vi velger alle radioknappene som har navnet på kontakt og lagre referansen til alle radioknappene i variabelen Radiobuttons. Deretter opprettet vi en sløyfe som vil iterere gjennom hver alternativknapp og vil sjekke om noen alternativknapp er sjekket eller ikke, noe som betyr at alternativknappen er valgt eller ikke. Hvis en alternativknapp er valgt, vil den lagre verdien av den alternativknappen i SelectedValue variabel.

Når sløyfen er avsluttet, forener vi IF/ellers -setningen som sjekker om den variable valgte verdien er tom eller ikke. Hvis den har en viss verdi, vil den varsle den verdien, ellers et varsel om Vennligst velg et alternativ vil bli vist for brukeren.

Vi kan se i output ovenfor at når vi ikke valgte en alternativknapp, viste varselet oss meldingen som Vennligst velg et alternativ. Men når vi velger E -post alternativknapp, vi ser verdien av e -post, og når vi velger Telefon alternativknappen så ser vi verdien på telefonen.

Konklusjon

For å sette opp en gruppe relaterte alternativer, og velge bare en på en gitt tid, brukes radioknapper. Radioknapper er initiert med <inngang> elementer av HTML og krysset av Eiendom brukes i JavaScript for å se om en alternativknapp er valgt eller ikke. Radioknapper er veldig nyttige når det er flere alternativer tilgjengelige og utvikleren vil at brukeren bare skal velge en. I dette innlegget lærer vi hvordan du tar innspill med radioknapper i JavaScript.