Hvordan sjekke/fjerne merket for avkrysningsruten ved hjelp av JavaScript

Avkrysningsruten er en type HTML -inngangselement som lar brukeren velge et av flere alternativer. Noen ganger kan det være en situasjon der avkrysningsrutene må sjekkes eller ikke merket i tilfelle å fylle ut et spørreskjema, quiz eller noen applikasjoner som må sjekke noen spesifikke eller alle tillatelser samtidig for å fortsette videre.

Denne oppskrivningen vil beskrive prosedyren for å sjekke og fjerne merket for avkrysningsruten ved hjelp av JavaScript.

Hvordan sjekke/fjerne merket for avkrysningsruten ved hjelp av JavaScript?

For å sjekke eller fjerne merket for avkrysningsrutene i JavaScript, bruk "krysset av" Egenskap. Først må du få referansen til HTML -elementet “avkrysningsrute”Ved hjelp av det tildelte“id" bruker "getElementById ()”Metode, og bruk deretter“krysset av”Eiendom på verdien.

Eksempel 1: Kontroller/Fjern merket for enkeltkrysboksen
Lag først en HTML -fil, med følgende kodelinjer:

Klikk på knapper for å sjekke eller fjerne merket for avkrysningsruten

Enig med vilkår og betingelser


Ja
Nei

I koden ovenfor:

• Lag en avkrysningsrute, med ID "avkrysningsrute”Det vil bli brukt til å få tilgang til elementet“avkrysningsrute”For å utføre handlinger.
• Lag to knapper, “Ja”Og“Nei”, For å sjekke eller fjerne merket for avkrysningsruten som vil utløse funksjonen“Sjekk()”Og“Fjern merket ()”Henholdsvis på klikkhendelsen.

Etter å ha utført koden ovenfor, vil utdataene være slik:

Deretter definerer du funksjonene for å utføre handlinger i avkrysningsruten i JavaScript -filen eller taggen. For å sjekke avkrysningsruten, bruk kodelinjene nedenfor:

funksjonskontroll ()
La input = dokument.getElementById ('avkrysningsrute');
inngang.sjekket = sant;

I koden ovenfor:

• Definere en funksjon “Sjekk()”Det vil utløse knappen for å sjekke avkrysningsruten.
• Inne i funksjonen til funksjonen, få referansen til avkrysningsruten ved å bruke IDen “avkrysningsrute”Ved hjelp av“getElementById ()”Metode og lagre den i en variabel”inngang”.
• Kontroller avkrysningsruten ved å stille inn “krysset av”Eiendom”ekte”.

For å fjerne merket for avkrysningsruten ved å klikke på “Nei”Knapp, bruk den undergitte koden:

funksjon av sjekk ()
La input = dokument.getElementById ('avkrysningsrute');
inngang.sjekket = falsk;

Ovennevnte kodebit:

• Definere en funksjon “Fjern merket ()”Det vil utløse knappen for å fjerne merket for avkrysningsruten.
• Inne i funksjonen til funksjonen, få referansen til avkrysningsruten ved å bruke IDen “avkrysningsrute”Ved hjelp av“getElementById ()”Metode og lagre den i en variabel”inngang”.
• Fjern merket for avkrysningsruten ved å stille inn “krysset av”Eiendom”falsk”.

Til slutt, definer en funksjon for å fjerne merket for avkrysningsruten som standard på sidebelastningen ved å bruke "vindu.på Last" begivenhet:

vindu.onload = funksjon ()
vindu.AddEventListener ('Last', sjekk, falsk);

Produksjon

Utgangen betyr at avkrysningsruten er avmerket og ikke merket med suksess mens du klikker på knappene.

Eksempel 2: Kontroller/fjerne merket for flere avkrysningsruter
La oss se et eksempel på hvordan du kan sjekke eller fjerne merket for alle avmerkingsboksene samtidig.

Opprett først en HTML -fil, og oppretter deretter flere avmerkingsbokser og en knapp med ID "veksle”Som vil veksle avkrysningsruten for å sjekke eller fjerne merket for:

Klikk på knappen for å sjekke eller fjerne merket for alle avmerkingsboksene

Sjekk eller fjerne merket for meg

Sjekk eller fjerne merket for meg

Sjekk eller fjerne merket for meg

Sjekk eller fjerne merket for meg

Sjekk eller fjerne merket for meg

Tilsvarende utgang vil være:

Etter det, i en JavaScript -fil eller tag, kan du legge til koden nedenfor for å sjekke eller fjerne merket for listen over avmerkingsbokser med et enkelt klikk. Først må du få referansen til knappen ved å bruke ID -en "veksle" og lagre den i en variabel "-knapp" og deretter feste en OnClick -hendelse og påkalle en funksjon "Checkallboxes”Som vil sjekke listen over avmerkingsbokser og deretter kalle neste funksjon”Fjern merket for”:

var knapp = dokument.getElementById ("Toggle");
knapp.OnClick = Checkallboxes;

For å merke av i avmerkingsboksene, bruk den undergitte koden

funksjon checkallboxes ()
var input = dokument.QuerySelectorAll ('.avkrysningsrute ');
for (var i = 0; i < input.length; i++)
input [i].sjekket = sant;

dette.onClick = uncheckallboxes;

I denne koden ovenfor:

• Først definer en funksjon "CheckAllBoxes ()”Som vil utløse på knappen klikk for å sjekke alle avmerkingsboksene.
• Inne i funksjonen til funksjonen, få referanser til alle avmerkingsbokser ved å bruke sine tildelte klasser “avkrysningsrute”Ved hjelp av“QuerySelectorAll ()”Metode og lagre den i en variabel”inngang”.
• Itererer avmerkingsboksene og angi “krysset av”Eiendom”ekte”For å sjekke alle avmerkingsboksene.
• Etter å ha merket av alle avmerkingsbokser, ring den andre funksjonen “Fjern merket for”På klikkhendelsen for å veksle knappen.

For å fjerne merket for listen over avkrysningsruten ved å klikke på knappen, bruk kodelinjene nedenfor:

Funksjons uncheckallboxes ()
var input = dokument.QuerySelectorAll ('.avkrysningsrute ');
for (var i = 0; i < input.length; i++)
input [i].sjekket = falsk;

dette.OnClick = Checkallboxes;

I dette ovennevnte kodebit:

• Definere en funksjon “Fjern merket for ()”Det vil utløse på knappen klikk for å fjerne merket for alle avmerkingsboksene.
• Inne i funksjonen til funksjonen, få referanser til alle avmerkingsbokser ved å bruke sine tildelte klasser “avkrysningsrute”Ved hjelp av“QuerySelectorAll ()”Metode og lagre den i en variabel”inngang”.
• Itererer avmerkingsboksene og angi “krysset av”Eiendom”falsk”For å fjerne merket for alle avmerkingsboksene.
• Etter det, ring den andre funksjonen “Checkallboxes”På klikkhendelsen for å veksle knappen.

Produksjon

Utgangen indikerer at listen over avkrysningsruter er vellykket avkrysset eller ukontrollert med en enkelt knapp.

Konklusjon

For å sjekke eller fjerne merket for avkrysningsrutene, bruk "krysset av”Eiendom. Etter å ha fått referansen til elementet “avkrysningsrute”Bruke dens“id”Ved hjelp av“getElementById ()”Metode, sjekk avkrysningsruten ved å stille inn“krysset av" tilskrive "ekte”. Tilsvarende sett "krysset av" tilskrive "falsk”For å fjerne merket for avkrysningsruten. Denne oppskrivningen beskriver prosedyren for å sjekke og fjerne merket for avkrysningsruten ved hjelp av JavaScript.