Denne opskrivning vil beskrive proceduren for at markere og fjerne markeringen i afkrydsningsfeltet ved hjælp af JavaScript.
Sådan markerer/fjerner du markeringen af afkrydsningsfeltet ved hjælp af JavaScript?
For at markere eller fjerne markeringen i afkrydsningsfelterne i JavaScript skal du bruge ' kontrolleret ' attribut. Få først referencen til HTML-elementet ' afkrydsningsfeltet ” ved hjælp af dens tildelte ” id ' bruger ' getElementById() '-metoden, og anvend derefter ' kontrolleret ” ejendom på dens værdi.
Eksempel 1: Marker/fjern markeringen i Single Checkbox
Først skal du oprette en HTML-fil med følgende kodelinjer:
< h3 > Klik på knapperne for at markere eller fjerne markeringen i afkrydsningsfeltet h3 >
< input type = 'afkrydsningsfelt' id = 'afkrydsningsfelt' > Enig med vilkår og betingelser < br >< br >
< knaptype = 'knap' onclick = 'kontrollere()' > Ja knap >
< knaptype = 'knap' onclick = 'fjern markeringen ()' > Nix knap >
I ovenstående kode:
- Opret et afkrydsningsfelt med id'et ' afkrydsningsfeltet ', der vil blive brugt til at få adgang til elementet ' afkrydsningsfeltet ” for at udføre handlinger.
- Opret to knapper, ' Ja ' og ' Nix ', for at markere eller fjerne markeringen af afkrydsningsfeltet, der vil udløse funktionen ' kontrollere() ' og ' fjern markeringen () ” henholdsvis på klikbegivenheden.
Efter at have udført ovenstående kode, vil outputtet være sådan:
Dernæst skal du definere funktionerne til at udføre handlinger på afkrydsningsfeltet i JavaScript-filen eller tagget. For at markere afkrydsningsfeltet, brug nedenstående kodelinjer:
fungere kontrollere ( ) {
lad input = dokument. getElementById ( 'afkrydsningsfelt' ) ;
input. kontrolleret = rigtigt ;
}
I ovenstående kode:
- Definer en funktion ' kontrollere() ”, der vil udløse et klik på knappen for at markere afkrydsningsfeltet.
- Inde i funktionens brødtekst skal du få referencen til afkrydsningsfeltet ved hjælp af dens id ' afkrydsningsfeltet ' ved hjælp af ' getElementById() ' metode og gem den i en variabel ' input ”.
- Marker afkrydsningsfeltet ved at indstille ' kontrolleret 'ejendom' rigtigt ”.
For at fjerne markeringen i afkrydsningsfeltet ved at klikke på ' Nix ”-knappen, brug nedenstående kode:
fungere fjern markeringen ( ) {lad input = dokument. getElementById ( 'afkrydsningsfelt' ) ;
input. kontrolleret = falsk ;
}
Ovenstående kodestykke:
- Definer en funktion ' fjern markeringen () ”, der vil udløse et klik på knappen for at fjerne markeringen i afkrydsningsfeltet.
- Inde i funktionens brødtekst skal du få referencen til afkrydsningsfeltet ved hjælp af dens id ' afkrydsningsfeltet ' ved hjælp af ' getElementById() ' metode og gem den i en variabel ' input ”.
- Fjern markeringen i afkrydsningsfeltet ved at indstille ' kontrolleret 'ejendom' falsk ”.
Til sidst skal du definere en funktion for at fjerne markeringen i afkrydsningsfeltet som standard ved sideindlæsningen ved hjælp af ' window.onload ' begivenhed:
vindue. påfyldning = fungere ( ) {vindue. addEventListener ( 'belastning' , kontrollere , falsk ) ;
}
Produktion
Outputtet betyder, at afkrydsningsfeltet er markeret og fjernet med succes, mens du klikker på knapperne.
Eksempel 2: Marker/fjern markeringen af flere afkrydsningsfelter
Lad os se et eksempel på, hvordan du markerer eller fjerner markeringen af alle afkrydsningsfelterne på samme tid.
Først skal du oprette en HTML-fil, og derefter oprette flere afkrydsningsfelter og en knap med id'et ' skifte ', der vil skifte afkrydsningsfeltet for at markere eller fjerne markeringen:
< h3 > Klik på knappen for at markere eller fjerne markeringen i alle afkrydsningsfelterne h3 >< input type = 'afkrydsningsfelt' klasse = 'afkrydsningsfelt' > Marker eller fjern markeringen af mig < br >
< input type = 'afkrydsningsfelt' klasse = 'afkrydsningsfelt' > Marker eller fjern markeringen af mig < br >
< input type = 'afkrydsningsfelt' klasse = 'afkrydsningsfelt' > Marker eller fjern markeringen af mig < br >
< input type = 'afkrydsningsfelt' klasse = 'afkrydsningsfelt' > Marker eller fjern markeringen af mig < br >
< input type = 'afkrydsningsfelt' klasse = 'afkrydsningsfelt' > Marker eller fjern markeringen af mig < br >< br >
< input type = 'knap' id = 'skift' værdi = 'Klik for at skifte mellem afkrydsningsfelterne' >
Det tilsvarende output vil være:
Derefter tilføjer du nedenstående kode i en JavaScript-fil eller