Hvordan sjekke om en alternativknapp er valgt med JavaScript
Radioknapper, en viktig del av HTML -skjemaer, lar brukere velge et av de flere alternativene. De kan opprettes ved å bare bruke Tag av type "radio". Radioknapper brukes i en gruppe på to eller flere knapper med et vanlig navn. Dette gjør det lettere å hente dem inn i et enkelt objekt og sjekke statusen deres. Status for en alternativknapp kan sjekkes ved å bruke to forskjellige metoder som vil bli diskutert i denne oppskrivningen.
Det første trinnet i begge disse metodene er det samme som er å lage et skjema som inneholder radioknapper:
Sette opp en HTML -skjema
Vi lager bare en enkel HTML -form med noen få radioknapper:
Velg din favorittfarge
I koden ovenfor brukte vi først en enkel
Tag for å gi en overskrift slik at brukeren lett kan forstå formålet med vår form som er å velge en favorittfarge. Vi brukte da Tag for å lage et skjema, inni som vi har brukt Tagger for å lage tre radioknapper som gir forskjellige alternativer til brukerne.
Vi har også brukt Tagger for å merke radioknappene våre. Vi brukte da et par
Tagger for å gi oss noen få linjeskift slik at hele formen ser fin ut og jevnt fordelt. Skjemaet ble avsluttet med en Tag som kan brukes til å sende inn skjemaet vårt. De Ringer CheckValue () Funksjon når det er klikket.
Nå skriver vi JavaScript -koden for å definere CheckValue () Funksjon for å sjekke hvilken alternativknapp som er valgt:
Metode 1: Bruke getElementsByName ()
Vi kan bruke .krysset av() Eiendom for å sjekke om en alternativknapp er valgt eller ikke:
funksjon checkValue ()
var radioer = dokument.getElementsByName ("Color");
for (const radio av radioer)
hvis (radio.krysset av)
Varsel (radio.verdi + "er din favorittfarge");
gå i stykker;
Inne i CheckValue () funksjon Vi har først erklært en variabel som heter radioer som mottar en Nodelist av alle radioknappene med navnefargen. Vi itererer deretter over Nodelist og sjekk statusen til hver alternativknapp. Hvis en alternativknapp er valgt, bruker vi varsling() metode for å vise hvilken farge som er valgt.
Koden for hele nettsiden:
Velg din favorittfarge
Hvis vi vil se etter en individuell alternativknapp, kan vi gi den en unik ID og deretter bruke GetElementsById () metode for å lagre den i en variabel. Vi kan deretter bruke krysset av() Eiendom for å sjekke om knappen er valgt.
Metode 2: Bruke QuerySectorAll () -metoden
De QuerySelectorAll () Metoden tar en CSS -velger som et argument og returnerer en nodelist av alle elementene som samsvarer med den gitte velgeren:
funksjon checkValue ()
var radioer = dokument.querySelectorAll ('input [name = "color"]');
for (const radio av radioer)
hvis (radio.krysset av)
Varsel (radio.verdi + "er din favorittfarge");
gå i stykker;
Definisjonen av CheckValue () Funksjonen er nesten den samme i begge metodene. Forskjellen er av metoden som får nodelisten til radioknapper. Metode 2 bruker QuerySelectorAll () metode for å få nodelisten.
Velg din favorittfarge
Konklusjon
Radioknapper brukes til å få brukerens preferanse fra en liste over alternativer. Grupper av radioknapper kan dannes ved å gi samme verdi til navnegenskapene sine. Bare en alternativknapp kan velges om gangen. Dette innlegget handlet om hvordan vi kan bruke JavaScript for å sjekke om en alternativknapp er valgt.