Hvordan sjekke om avkrysningsruten er avmerket ved hjelp av JavaScript

Avkrysningsruten er en HTML -inngangstype som fungerer som en utvelgelsesboks. Det brukes til å velge eller fjerne markeringen av et bestemt alternativ. KrysBokser brukes ofte til å la besøkende engasjere seg med websider og ofte legge ut data til en backend ved å merke av i boksen som gjelder en viss tilstand.

Denne håndboken vil demonstrere teknikken for å bekrefte om avkrysningsruten er merket av eller ikke.

Hvordan sjekke om avkrysningsruten er avmerket ved hjelp av JavaScript?

For å finne ut om avkrysningsruten er avmerket, bruk "krysset av”Eiendom. Som vi vet, inneholder hvert element noen få egenskaper som lar JavaScript kontrollere det på visse måter, og avkrysningsrutenes avkryssede eiendommer er en av disse. Den sjekket egenskapen gir den boolske verdien sann eller falsk når en avkrysningsrute er valgt.

Eksempel 1: Bruke OnClick () -hendelse for å sjekke om avkrysningsruten er merket av
Vi vil først opprette en avkrysningsrute som legger ved "ved trykk()”Hendelse som vil påkalle den brukerdefinerte“BoxChecked ()”Funksjon for å sjekke om avkrysningsruten er avmerket eller ikke:

Merk av i boksen for å godta vilkår og betingelser:

Jeg godtar alle vilkårene og betingelsene.

I JavaScript -filen vil vi definere en funksjon som heter “BoxChecked ()”, Som først vil hente avkrysningsruten -ID -en ved hjelp av“getElementById ()”Metode og bruk deretter den sjekket egenskapen på en slik måte at den sjekket returnerte verdien er satt til“ekte”Hvis det er merket som sjekket. Deretter vises et varsel med meldingen "Avkrysningsruten er merket av! Takk for at du aksepterte:”:

funksjon boxChecked ()
var avkrysningsrute = dokument.getElementById ("avkrysningsrute");
if (avkrysningsrute.sjekket == true)
Varsel ("Avmerkingsboksen er avmerket! Takk for at du aksepterte:");

Tilsvarende utgang er vist nedenfor:

Eksempel 2: Bruke AddEventListener () -metode for å sjekke om avkrysningsruten er avmerket
Her oppretter vi en avkrysningsrute uten en OnClick () -arrangement. Deretter vil vi legge til et avsnitt, og visningen er satt som "ingen”Inntil avkrysningsruten er ikke merket av. I det andre tilfellet, når avkrysningsruten er merket som avkrysning, vises den ekstra teksten i grønn farge:

Jeg godtar alle vilkårene og betingelsene.

KRYSSET AV!

Du kan også bekrefte om avkrysningsruten er merket av eller ikke uten å bruke OnClick () -arrangementet. Her vil vi bruke en annen metode som heter “AddEventListener ()" med "QuerySelector ()”Metode ved hjelp av avkrysningsrutenes avkrysningsegenskap. Dette vil fungere på en slik måte at QuerySelector () -metoden først vil velge det første elementet som er matchet med den ekstra IDen, og deretter vil AddEventListener () -metoden knytte til “Klikk”Arrangement med det:

var tekst = dokument.getElementById ("tekst");
dokument.QuerySelector ('#avkrysningsrute').AddEventListener ('klikk', (hendelse) =>
hvis (hendelse.mål.krysset av)
tekst.stil.display = "blokk";

)

Det kan sees at når avkrysningsruten er merket, vises det ekstra innholdet i grønn farge:

Alt du trenger å vite om hvordan du kan avgjøre om en avkrysningsrute er merket eller ikke har blitt gitt deg.

Konklusjon

For å avgjøre om avkrysningsruten er avmerket, bruk avkrysningsruten “krysset av”Eiendom. Den sjekket egenskapen gir en boolsk verdi sant hvis den er sjekket; ellers gir det falskt. For verifiseringen kan du bruke to forskjellige prosedyrer; Den ene er OnClick () -arrangementet, og den andre er AddEventListener () -metoden. I denne håndboken har vi beskrevet prosedyren for å bekrefte om avkrysningsruten er avkrysning eller ikke ved hjelp av JavaScript.