Cet article décrira la procédure pour cocher et décocher la case à l'aide de JavaScript.
Comment cocher/décocher la case à cocher en utilisant JavaScript ?
Pour cocher ou décocher les cases à cocher en JavaScript, utilisez le ' vérifié ' attribut. Tout d'abord, récupérez la référence de l'élément HTML ' case à cocher « avec l'aide de son attitré » identifiant ' en utilisant le ' getElementById() ', puis appliquez la méthode' vérifié ” propriété sur sa valeur.
Exemple 1 : cocher/décocher la case à cocher unique
Commencez par créer un fichier HTML, avec les lignes de code suivantes :
< h3 > Cliquez sur les boutons pour cocher ou décocher la case h3 >
< type d'entrée = 'case à cocher' identifiant = 'case à cocher' > Accepter les termes et conditions < Br >< Br >
< type de bouton = 'bouton' sur clic = 'Chèque()' > Oui bouton >
< type de bouton = 'bouton' sur clic = 'décocher()' > Non bouton >
Dans le code ci-dessus :
- Créez une case à cocher, avec l'id ' case à cocher ' qui sera utilisé pour accéder à l'élément ' case à cocher ” pour effectuer des actions.
- Créez deux boutons, ' Oui ' et ' Non », pour cocher ou décocher la case qui déclenchera la fonction « Chèque() ' et ' décochez() ” respectivement sur l'événement de clic.
Après avoir exécuté le code ci-dessus, la sortie ressemblera à ceci :
Ensuite, définissez les fonctions pour effectuer des actions sur la case à cocher dans le fichier JavaScript ou la balise. Pour cocher la case, utilisez les lignes de code ci-dessous :
fonction Chèque ( ) {
laisser entrer = document. getElementById ( 'case à cocher' ) ;
saisir. vérifié = vrai ;
}
Dans le code ci-dessus :
- Définir une fonction ' Chèque() ” qui déclenchera le bouton cliquez pour cocher la case.
- Dans le corps de la fonction, obtenez la référence de la case à cocher en utilisant son identifiant ' case à cocher ' avec l'aide du ' getElementById() 'méthode et stockez-la dans une variable' saisir ”.
- Cochez la case en définissant le ' vérifié ' propriété ' vrai ”.
Pour décocher la case en cliquant sur le ' Non ', utilisez le code ci-dessous :
fonction décochez ( ) {laisser entrer = document. getElementById ( 'case à cocher' ) ;
saisir. vérifié = faux ;
}
L'extrait de code ci-dessus :
- Définir une fonction ' décochez() ” qui déclenchera le clic du bouton pour décocher la case.
- Dans le corps de la fonction, obtenez la référence de la case à cocher en utilisant son identifiant ' case à cocher ' avec l'aide du ' getElementById() 'méthode et stockez-la dans une variable' saisir ”.
- Décochez la case en définissant le ' vérifié ' propriété ' faux ”.
Définissez enfin une fonction pour décocher la case par défaut au chargement de la page à l'aide du bouton ' fenêtre.onload ' un événement:
la fenêtre. en charge = fonction ( ) {la fenêtre. addEventListener ( 'charger' , Chèque , faux ) ;
}
Production
La sortie signifie que la case est cochée et décochée avec succès en cliquant sur les boutons.
Exemple 2 : cocher/décocher plusieurs cases à cocher
Voyons un exemple de la façon de cocher ou décocher toutes les cases en même temps.
Tout d'abord, créez un fichier HTML, puis créez plusieurs cases à cocher et un bouton avec l'id ' basculer ” qui basculera la case à cocher pour cocher ou décocher :
< h3 > Cliquez sur le bouton pour cocher ou décocher toutes les cases h3 >< type d'entrée = 'case à cocher' classer = 'case à cocher' > Cochez ou décochez-moi < Br >
< type d'entrée = 'case à cocher' classer = 'case à cocher' > Cochez ou décochez-moi < Br >
< type d'entrée = 'case à cocher' classer = 'case à cocher' > Cochez ou décochez-moi < Br >
< type d'entrée = 'case à cocher' classer = 'case à cocher' > Cochez ou décochez-moi < Br >
< type d'entrée = 'case à cocher' classer = 'case à cocher' > Cochez ou décochez-moi < Br >< Br >
< type d'entrée = 'bouton' identifiant = 'basculer' évaluer = 'Cliquez pour activer les cases à cocher' >
La sortie correspondante sera :
Après cela, dans un fichier JavaScript ou une balise