Dit artikel beschrijft de procedure voor het in- en uitschakelen van het selectievakje met behulp van JavaScript.
Hoe het selectievakje aan- of uitvinken met JavaScript?
Om de selectievakjes in JavaScript in of uit te schakelen, gebruikt u de knop ' gecontroleerd ” attribuut. Zoek eerst de referentie van het HTML-element ' selectievakje ” met de hulp van de toegewezen “ ID kaart ' de ... gebruiken ' getElementById() ' methode en pas vervolgens de ' gecontroleerd ” eigendom op zijn waarde.
Voorbeeld 1: Vink het enkele selectievakje aan/uit
Maak eerst een HTML-bestand met de volgende regels code:
< h3 > Klik op de knoppen om het selectievakje in of uit te schakelen h3 >
< invoertype = 'vinkje' ID kaart = 'vinkje' > Akkoord gaan met de voorwaarden < br >< br >
< knop type = 'knop' bij klikken = 'controleren()' > Ja knop >
< knop type = 'knop' bij klikken = 'vinkje weghalen()' > Nee knop >
In bovenstaande code:
- Maak een selectievakje aan met de id ' selectievakje ” dat zal worden gebruikt om toegang te krijgen tot het element “ selectievakje ” om acties uit te voeren.
- Maak twee knoppen, ' Ja ' en ' Nee ”, om het selectievakje aan of uit te vinken dat de functie “ controleren() ' en ' vinkje weghalen() ” respectievelijk op de klikgebeurtenis.
Na het uitvoeren van de bovenstaande code ziet de uitvoer er als volgt uit:
Definieer vervolgens de functies om acties uit te voeren op het selectievakje in het JavaScript-bestand of de tag. Gebruik de onderstaande coderegels om het selectievakje aan te vinken:
functie controleren ( ) {
laat invoeren = document. getElementById ( 'vinkje' ) ;
invoer. gecontroleerd = WAAR ;
}
In bovenstaande code:
- Definieer een functie “ controleren() ' waarmee de knop wordt geactiveerd om het selectievakje aan te vinken.
- Haal in de hoofdtekst van de functie de referentie van het selectievakje op met behulp van de id ' selectievakje ” met behulp van de “ getElementById() ” methode en sla deze op in een variabele “ invoer ”.
- Vink het selectievakje aan door de ' gecontroleerd ' eigendom ' WAAR ”.
Om het selectievakje uit te schakelen door te klikken op de knop ' Nee ” knop, gebruik de onderstaande code:
functie uitvinken ( ) {laat invoeren = document. getElementById ( 'vinkje' ) ;
invoer. gecontroleerd = vals ;
}
Het bovenstaande codefragment:
- Definieer een functie “ vinkje weghalen() ' waarmee de knop wordt geactiveerd om het selectievakje uit te schakelen.
- Haal in de hoofdtekst van de functie de referentie van het selectievakje op met behulp van de id ' selectievakje ” met behulp van de “ getElementById() ” methode en sla deze op in een variabele “ invoer ”.
- Schakel het selectievakje uit door de optie ' gecontroleerd ' eigendom ' vals ”.
Definieer ten slotte een functie om het selectievakje standaard uit te schakelen bij het laden van de pagina met behulp van de ' venster.onload ' evenement:
venster. laden = functie ( ) {venster. addEventListener ( 'laden' , controleren , vals ) ;
}
Uitgang
De uitvoer geeft aan dat het selectievakje met succes is aangevinkt en uitgeschakeld tijdens het klikken op de knoppen.
Voorbeeld 2: vink meerdere selectievakjes aan/uit
Laten we een voorbeeld bekijken van hoe u alle selectievakjes tegelijkertijd kunt aan- of uitvinken.
Maak eerst een HTML-bestand en maak vervolgens meerdere selectievakjes en een knop met de id ' schakelaar ” waarmee het selectievakje wordt omgeschakeld om aan of uit te vinken:
< h3 > Klik op de knop om alle selectievakjes in of uit te schakelen h3 >< invoertype = 'vinkje' klas = 'vinkje' > Schakel mij in of uit < br >
< invoertype = 'vinkje' klas = 'vinkje' > Schakel mij in of uit < br >
< invoertype = 'vinkje' klas = 'vinkje' > Schakel mij in of uit < br >
< invoertype = 'vinkje' klas = 'vinkje' > Schakel mij in of uit < br >
< invoertype = 'vinkje' klas = 'vinkje' > Schakel mij in of uit < br >< br >
< invoertype = 'knop' ID kaart = 'schakelaar' waarde = 'Klik om de selectievakjes in te schakelen' >
De bijbehorende uitvoer is:
Voeg daarna in een JavaScript-bestand of