Hvordan få avkrysningsruteverdi i JavaScript

I JavaScript gir du en avkrysningsruteverdi for brukeren når du bekrefter de valgte alternativene. Når det. I tillegg hjelper du å velge flere alternativer for et svar i en quiz eller et spørreskjema og få verdien av avmerkingsboksen med å finne riktig løsning.

Denne oppskrivningen vil guide deg til å få/hente avkrysningsruter i JavaScript.

Hvordan få/hente avkrysningsruten Verdi i JavaScript?

For å få avmerkingsboksen i JavaScript, kan du bruke:

• • “dokument.QuerySelectorAll ()”Metode
  • “dokument.getElementById”Metode

Vi vil nå gå gjennom hver av metodene en etter en!

Metode 1: Få avkrysningsruteverdi i JavaScript ved å bruke dokument.querySelectorAll () -metode

“dokument.QuerySelectorAll ()”Metode returnerer alle elementene som samsvarer med en CSS -velger. Du kan også bruke denne metoden for å velge de spesifiserte avmerkingsboksverdiene.

Syntaks

dokument.QuerySelectorAll (CSS -velgere)

Her, “CSS -velgere”Se avkrysningsrutenavnet definert i HTML -filen.

Gå gjennom følgende eksempel for demonstrasjon:

Eksempel

I det første trinnet vil vi tildele en "etikett for”Attributt som spesifiserer en etikett for et input HTML -element i et skjema. Etter det vil vi legge til inngangstypen "avkrysningsrute”For å bruke avkrysningsruten som en inngang. Nå vil vi tildele “Navn”,“verdi”, Og“id”For hver avkrysningsrute. Til slutt vil vi også inkludere en knapp for å få avkrysningsruten verdi. Disse prosessene vil bli gjentatt for hver av de tre avmerkingsboksene:

Velg favorittspråket ditt

Python
Java
JavaScript

Få valgt emne

I neste trinn henter vi knappen "id" ved hjelp av "dokument.QuerySelector ()”Metode og legg til“Klikk”Hendelse til knappen. Deretter inkluderer "dokument.QuerySelectorAll ()”Metode innen klikkhendelsen for å velge verdiene til de spesifiserte avmerkingsboksene. Til slutt, bruk "trykk()”Metode for å vise verdien av hver valgte avkrysningsrute ved å bruke“dokument.skrive()”Metode:

Utgangen fra implementeringen ovenfor vil resultere i:

Metode 2: Få avkrysningsruteverdi i JavaScript ved å bruke dokument.getElementById () -metode

“dokument.getElementById ()”Metode returnerer et element med en spesifisert verdi eller ID. Det kan også brukes til å hente avkrysningsruten "id”Og returner verdien av hver valgte avkrysningsrute.

Syntaks

dokument.getElementById (ElementId)

Her, "ElementId” refererer til ID -verdien til et element hvis valgte verdi kommer til å bli hentet.

La oss gå gjennom følgende eksempel for demonstrasjon.

Eksempel

For det første vil vi spesifisere inngangstypen til “avkrysningsrute”Og tilordne“id”,“klasse”, Og“verdi”Til hver avkrysningsrute som diskutert i forrige metode. Vi vil inneholde disse funksjonalitetene i en tag som heter tabelldata "”. Tilsvarende vil vi inkludere en knapp med en "ved trykk”Hendelse som vil få tilgang til funksjonen”GetCheckBoxValue ()”:

Velg favorittspråket ditt

Python:
Java:
JavaScript:
Sende inn

Nå vil vi erklære en funksjon som heter “GetCheckBoxValue ()”For å hente ID -en for hver avkrysningsrute ved hjelp av“dokument.getElementById ()”Metode. Deretter vil vi lage en variabel “resultat”, Der den resulterende verdien av den valgte avmerkingsboksen blir lagret.

Til slutt vil vi legge til forskjellige forhold for hver avkrysningsrute ved å bruke "Hvis/ellers”Uttalelser. Disse uttalelsene vil fungere på en slik måte at hvis en spesifikk avkrysningsrute er valgt eller merket som sjekket, er dokumentet.getElementById () -metode vil få tilgang til ID -en, og den tilsvarende verdien mot den aktuelle IDen vises. Til slutt, vis innholdet i avkrysningsruten til butikkboksen:

Utgangen fra implementeringen ovenfor vil resultere i:

Vi har gitt alle de enkleste metodene for å få avmerkingsboksverdier i JavaScript.

Konklusjon

For å få avmerkingsboksen i JavaScript, kan du bruke "dokument.QuerySelectorAll ()”Metode for å velge de spesifiserte avmerkingsboksene eller“dokument.getElementById”Metode for å få“id”Mot hver av de valgte avmerkingsboksene og viser den tilsvarende verdien. Denne oppskrivningen har forklart metodene for å få avmerkingsboksverdier i JavaScript.