Dit artikel demonstreert de methoden voor het in- en uitschakelen van alle selectievakjes met JavaScript.
Hoe alle selectievakjes in- en uitschakelen met JavaScript?
Als u alle selectievakjes in JavaScript wilt in- en uitschakelen, kunt u het volgende toepassen:
- “ document.getElementsByName ”-methode met selectievakjes
- “ document.getElementsByName ” methode met knoppen
De genoemde benaderingen zullen nu één voor één worden besproken!
Methode 1: Schakel alle selectievakjes in JavaScript in en uit met behulp van de methode 'document.getElementsByName()' met 'Checkboxes'
De ' document.getElementsByName() ”-methode retourneert de elementen met de opgegeven naam in de argumenten. Deze methode wordt toegepast om de waarde van elk selectievakje op te halen met behulp van de doorgegeven naam.
Laten we het volgende voorbeeld doornemen ter demonstratie.
Voorbeeld
Eerst wordt het invoertype gespecificeerd als ' selectievakje ” en een specifieke naam en waarde worden toegewezen aan elk selectievakje:
< invoertype: = 'selectievakje' naam = 'alleen maar' waarde = 'Python' > Python < br />< invoertype: = 'selectievakje' naam = 'alleen maar' waarde = 'Java' > Java < br />
< invoertype: = 'selectievakje' naam = 'alleen maar' waarde = 'JavaScript' > JavaScript < br />
Voeg nu een extra selectievakje toe met de waarde ' Controleer alles ” en voeg een “ bij klikken() ” evenement met dit selectievakje dat op zo'n manier werkt wanneer op het selectievakje wordt geklikt, de “ checkNiet aangevinkt ()” methode wordt aangeroepen met het object “ deze ” als argument:
< invoertype: = 'selectievakje' bij klikken = 'vink aan (dit)' /> Controleer alles < br />
Definieer daarna een functie met de naam ' checkDeselecteer() ” in het JavaScript-bestand, met een variabele met de naam “ checkBox ’ als argument. Open nu de checkbox-waarden met behulp van de ' document.getElementsByName() ” methode en plaats de waarde van de “ naam ” attribuut als argument.
Pas ten slotte een ' voor ' loop om langs alle checkbox-waarden te herhalen en gebruik de ' gecontroleerd ” eigenschap om ze allemaal als aangevinkt te markeren:
functiecontroleUitvinken ( checkBox ) {krijgen = document. getElementsByName ( 'alleen maar' ) ;
voor ( was binnen = 0 ; i < krijgen. lengte ; i ++ ) {
krijgen [ i ] . gecontroleerd = checkBox. gecontroleerd ; }
}
Zoals u kunt zien, wanneer de “ Controleer alles ” is gemarkeerd, zijn alle andere selectievakjes ook gemarkeerd als aangevinkt:
Methode 2: Schakel alle selectievakjes in JavaScript in en uit met behulp van de methode 'document.getElementsByName()' met 'knoppen'
De ' document.getElementsByName() ”-methode, zoals besproken in de vorige methode, haalt de elementen op met de opgegeven naam in zijn argumenten. Het kan worden gebruikt om alle toegevoegde selectievakjes op een webpagina aan of uit te vinken.
Kijk naar het volgende voorbeeld voor demonstratie.
Voorbeeld
Nu zullen we twee knoppen opnemen voor zowel de ' Controleert alles ' en ' Schakel alles uit ” functionaliteiten. Voeg vervolgens een ' bij klikken ” gebeurtenis met beide knoppen die afzonderlijk toegang hebben tot de gespecificeerde functies:
< invoertype: = 'knop' bij klikken = 'controleren()' waarde = 'Controleert alles' />< invoertype: = 'knop' bij klikken = 'uitvinken()' waarde = 'Deselecteert Alles' />
Definieer vervolgens een functie met de naam ' controleren() ” en pas de “ document.getElementsByName ”-methode met de opgegeven waarde van de “ naam ” attribuut. Herhaal vervolgens de ' voor ” loop langs alle checkbox-waarden die in de vorige methode zijn besproken.
Bovendien, wanneer op de bijbehorende knop wordt geklikt, wordt de ' gecontroleerd ” eigenschap markeert alle selectievakjes en stelt de aangevinkte staat in als “ WAAR ”:
functiecontrole ( ) {wees geit = document. getElementsByName ( 'controleren' ) ;
voor ( was binnen = 0 ; i < krijgen. lengte ; i ++ ) {
krijgen [ i ] . gecontroleerd = WAAR ; }
}
Definieer vervolgens een functie met de naam ' vinkje uit() ”, en voeg de omgekeerde functionaliteit erin toe om de eigenschap van het aangevinkte vakje te markeren als “ vals ”:
functie deselecteren ( ) {wees geit = document. getElementsByName ( 'controleren' ) ;
voor ( was binnen = 0 ; i < krijgen. lengte ; i ++ ) {
krijgen [ i ] . gecontroleerd = vals ; }
}
Het kan in de uitvoer zien dat de toegevoegde knoppen perfect werken:
We hebben de gemakkelijkste methoden gegeven om alle selectievakjes met JavaScript aan en uit te vinken.
Conclusie
Gebruik voor het in- en uitschakelen van alle selectievakjes met JavaScript de ' document.getElementsByName() ” methode met “ Selectievakjes ' om een selectievakje toe te voegen en toegang te krijgen tot de functie, waardoor de selectievakjes worden aangevinkt of dezelfde methode wordt toegepast met ' Toetsen ” om twee knoppen afzonderlijk op te nemen voor het aan- en uitvinken van alle opgegeven waarden. In dit artikel werden de methoden uitgelegd voor het in- en uitschakelen van alle selectievakjes met JavaScript.