Denne oppskriften vil beskrive fremgangsmåten for å merke av og fjerne merket for avmerkingsboksen ved hjelp av JavaScript.
Hvordan krysse av/fjerne avmerkingsboksen ved å bruke JavaScript?
For å merke av eller fjerne merket for avmerkingsboksene i JavaScript, bruk ' sjekket ' Egenskap. Først, få referansen til HTML-elementet ' avmerkingsboksen ' ved hjelp av den tildelte ' id ' bruker ' getElementById() '-metoden, og bruk deretter ' sjekket ” eiendom på sin verdi.
Eksempel 1: Kryss av/fjern merket for Enkeltavmerkingsboksen
Lag først en HTML-fil med følgende kodelinjer:
< h3 > Klikk på knappene for å merke av eller fjerne merket i avmerkingsboksen h3 >
< inndatatype = 'avmerkingsboks' id = 'avmerkingsboks' > Enig med vilkår og betingelser < br >< br >
< knappetype = 'knapp' ved trykk = 'kryss av()' > Ja knapp >
< knappetype = 'knapp' ved trykk = 'uncheck()' > Nei knapp >
I koden ovenfor:
- Opprett en avmerkingsboks, med id ' avmerkingsboksen ' som vil bli brukt for å få tilgang til elementet ' avmerkingsboksen ' for å utføre handlinger.
- Lag to knapper, ' Ja ' og ' Nei ', for å merke av eller fjerne merket for avmerkingsboksen som vil utløse funksjonen ' kryss av() ' og ' fjern merket () ” henholdsvis på klikkhendelsen.
Etter å ha utført koden ovenfor, vil utgangen være slik:
Deretter definerer du funksjonene for å utføre handlinger på avmerkingsboksen i JavaScript-filen eller taggen. For å merke av i avmerkingsboksen, bruk kodelinjene nedenfor:
funksjon kryss av ( ) {
la innspill = dokument. getElementById ( 'avmerkingsboks' ) ;
input. sjekket = ekte ;
}
I koden ovenfor:
- Definer en funksjon ' kryss av() ” som vil utløse knappen klikk for å merke av i avmerkingsboksen.
- Inne i hoveddelen av funksjonen, få referansen til avmerkingsboksen ved å bruke dens id ' avmerkingsboksen ' ved hjelp av ' getElementById() ' metode og lagre den i en variabel ' input '.
- Merk av i avmerkingsboksen ved å sette ' sjekket ' eiendom ' ekte '.
For å fjerne merket i boksen ved å klikke på ' Nei '-knappen, bruk koden nedenfor:
funksjon fjern merket ( ) {la innspill = dokument. getElementById ( 'avmerkingsboks' ) ;
input. sjekket = falsk ;
}
Kodebiten ovenfor:
- Definer en funksjon ' fjern merket () ” som vil utløse knappen klikk for å fjerne merket i avmerkingsboksen.
- Inne i hoveddelen av funksjonen, få referansen til avmerkingsboksen ved å bruke dens id ' avmerkingsboksen ' ved hjelp av ' getElementById() ' metode og lagre den i en variabel ' input '.
- Fjern merket i boksen ved å sette ' sjekket ' eiendom ' falsk '.
Til slutt, definer en funksjon for å fjerne merket for avmerkingsboksen som standard ved sideinnlastingen ved å bruke ' window.onload ' begivenhet:
vindu. på Last = funksjon ( ) {vindu. addEventListener ( 'laste' , kryss av , falsk ) ;
}
Produksjon
Utgangen betyr at avkrysningsboksen er merket av og fjernet merket mens du klikker på knappene.
Eksempel 2: Merk av/fjern merket for flere avmerkingsbokser
La oss se et eksempel på hvordan du merker av eller fjerner merket for alle avmerkingsboksene samtidig.
Opprett først en HTML-fil, og lag deretter flere avmerkingsbokser og en knapp med id ' veksle ' som vil veksle avmerkingsboksen for å merke av eller fjerne merket:
< h3 > Klikk på knappen for å merke av eller fjerne merket for alle avmerkingsboksene h3 >< inndatatype = 'avmerkingsboks' klasse = 'avmerkingsboks' > Sjekk eller fjern merket for meg < br >
< inndatatype = 'avmerkingsboks' klasse = 'avmerkingsboks' > Sjekk eller fjern merket for meg < br >
< inndatatype = 'avmerkingsboks' klasse = 'avmerkingsboks' > Sjekk eller fjern merket for meg < br >
< inndatatype = 'avmerkingsboks' klasse = 'avmerkingsboks' > Sjekk eller fjern merket for meg < br >
< inndatatype = 'avmerkingsboks' klasse = 'avmerkingsboks' > Sjekk eller fjern merket for meg < br >< br >
< inndatatype = 'knapp' id = 'veksle' verdi = 'Klikk for å veksle mellom avmerkingsboksene' >
Den tilsvarende utgangen vil være:
Etter det, i en JavaScript-fil eller