Avkrysningsruten OnClick -arrangementer i JavaScript

Avmerkingsboksen er et HTML -inngangselement som tillater brukeren å velge ett av flere alternativer. Som med HTML -skjemaer, er det en avkrysningsrute for kjønn, mann eller kvinne. Eller noen ganger må vilkårene og betingelsene godkjennes før du sender inn skjemaet. “ved trykk”Arrangementet vil bli koblet til avkrysningsruten, og den vil bli utløst eller utført når en avkrysningsrute er klikket.

Denne artikkelen vil demonstrere avkrysningsruten OnClick -hendelsen i JavaScript.

Avkrysningsruten OnClick -arrangementer i JavaScript

“ved trykk”Er en hendelse som vil bli utløst når brukeren sjekker avkrysningsruten. Onclick -arrangementet vil være vedlagt med avkrysningsruten av:

• Bruke OnClick -attributtet i HTML -taggen
• Bruke en funksjon på OnClick -attributtet til et HTML -element i JavaScript
• Legger eksplisitt til en hendelseslytter på “Klikk" begivenhet

La oss bruke alle disse en etter en.

Eksempel 1: avkrysningsrute OnClick -arrangement ved hjelp av OnClick -attributtet i HTML -taggen
Opprett en avkrysningsrute i en HTML -fil med ID “bli enige”Og vedlegg en“ved trykk”Hendelse med det som vil utføre funksjonen CheckClickFunc () Skrevet i JavaScript -delen:

OnClick -eiendom i HTML ved å ringe JavaScript -funksjonen

Enig vilkår og betingelser

Bruk kodelinjene i en JavaScript -fil:

Funksjon CheckClickFunc ()

var avkrysningsrute = dokument.getElementById ('Enig');
if (avkrysningsrute.sjekket == true)

Varsel ("avkrysningsrute er klikket");

I koden ovenfor,

• Lag funksjonen CheckClickFunc () som skal utføres når du klikker på avkrysningsruten.
• Bruker "getElementById ()”Metode, hent avkrysningsruten med sin ID,”bli enige”.
• Kontroller avkrysningsruten status ved å bruke "krysset av" Egenskap.
• Hvis det er "ekte”, Vis en varselmelding“Avkrysningsruten er klikket”.

Produksjon

Eksempel 2: avkrysningsrute OnClick -hendelsen ved å bruke en funksjon på OnClick -attributtet til et HTML -element i JavaScript
I dette eksemplet vil JavaScript bli brukt til å gi en verdi til ved trykk attributt til HTML -elementet i stedet for i HTML -taggen.

Opprett en avkrysningsrute og tilordne en ID til den som senere vil få tilgang til i JavaScript:

Avkrysningsrute OnClick ved hjelp av JavaScript

Enig vilkår og betingelser

I det følgende trinnet vil avkrysningsruten nå få tilgang til ved å bruke ID -en "bli enige" og en "ved trykk”Attributt vil være knyttet til den. Ved avkrysningsruten klikk vil den definerte funksjonen bli utført, og en varslingsmelding vises:

dokument.getElementById ("Enig").onClick = funksjon CheckClickFunc ()
Varsel ("avkrysningsrute er klikket");

Tilsvarende utgang vil være:

Eksempel 3: avkrysningsrute OnClick -arrangement ved eksplisitt å legge til hendelseslytter på "Klikk" -hendelse
Her vil avkrysningsruten OnClick -arrangementet bli satt ved hjelp av JavaScript “AddEventListener ()”Metode:

Avkrysningsrute OnClick ved hjelp av JavaScript gjennom AddEventListener

Enig vilkår og betingelser

I JavaScript -filen bruker du den gitte koden:

dokument.getElementById ("Enig").AddEventListener ("Klikk", CheckClickFunc);
funksjon CheckClickFunc ()
Varsel ("avkrysningsrute er klikket");

I ovennevnte kodebit,

• Først, hent avkrysningsruten ved hjelp av ID -en og fest deretter en "AddEventListener ()”Metode ved å passere en“Klikk”Hendelse og en funksjon”CheckClickFunc”Som vil bli kalt i avkrysningsruten klikk.
• Definere en funksjon “CheckClickFunc ()”, Som vil bli utløst mens du klikker på avkrysningsruten og viser en varslingsmelding:

Produksjon

Konklusjon

Avkrysningsruten OnClick -hendelser er hendelser utført når en avkrysningsrute er merket som “krysset av”. Disse hendelsene blir ikke brukt som standard på et avkrysningsartement i HTML -dokumentet. Derfor må brukeren manuelt legge til hendelsene for å utføre spesifikk funksjonalitet. Det er tre forskjellige måter å legge til en “ved trykk”Arrangement og utføre en handling på den hendelsen ved hjelp av JavaScript. Denne artikkelen forklarer disse tre metodene sammen med eksempler.