Les événements de la boîte à cocher OnClick en javascript
Cet article montrera l'événement à cocher onclick en javascript.
Les événements de la boîte à cocher OnClick en javascript
Le "sur clic"Est un événement qui sera déclenché lorsque l'utilisateur vérifie la case à cocher. L'événement OnClick sera attaché avec la case à cocher par:
- Utilisation de l'attribut onClick dans la balise HTML
- Application d'une fonction sur l'attribut onClick d'un élément HTML dans JavaScript
- Ajouter explicitement un auditeur d'événements sur le "Cliquez sur" événement
Utilisons tous ceux-ci par un.
Exemple 1: Événement à cocher onclick à l'aide de l'attribut onClick dans la balise HTML
Créez une case à cocher dans un fichier html avec l'ID "accepter"Et attachez un"sur clic»Événement avec lui qui exécutera la fonction CheckClickFunc () Écrit dans la partie javascript:
Propriété OnClick dans HTML en appelant la fonction JavaScript
Accepter les termes et conditions
Utilisez les lignes de code ci-dessous dans un fichier javascript:
fonction CheckClickFunc ()var checkbox = document.getElementById («d'accord»);
if (coche.vérifié == true)
alert ("Checkbox est cliqué");
Dans le code ci-dessus,
- Créer la fonction CheckClickFunc () qui doit être exécuté en cliquant sur la case à cocher.
- En utilisant le "getElementByid ()«Méthode, récupérez la case à cocher par son identifiant,«accepter".
- Cochez l'état de la case à l'aide en utilisant le «vérifié" attribut.
- Si c'est "vrai", Montrez un message alerte"La case à cocher est cliquée".
Sortir
Exemple 2: Événement à cocher onclick en appliquant une fonction sur l'attribut onClick d'un élément HTML en JavaScript
Dans cet exemple, JavaScript sera utilisé pour donner une valeur sur clic Attribut de l'élément HTML plutôt que dans la balise HTML.
Créez une case à cocher et attribuez-y un ID qui sera plus tard accessible dans JavaScript:
Cocher la boîte sur onclick en utilisant JavaScript
Accepter les termes et conditions
Dans l'étape suivante, la case sera accessible en utilisant son identifiant "accepter" Et un "sur clic»L'attribut y sera attaché. Lors du clic de la case à cocher, la fonction définie sera exécutée et un message d'alerte sera affiché:
document.getElementByid ("d'accord").onClick = fonction CheckClickFunc ()alert ("Checkbox est cliqué");
La sortie correspondante sera:
Exemple 3: Événement à cocher onClick en ajoutant explicitement l'écouteur d'événements sur l'événement «cliquez»
Ici, l'événement à cocher onclick sera défini à l'aide du javascript "addEventListener ()" méthode:
Cocher la boîte sur onclick à l'aide de JavaScript via addEventListener
Accepter les termes et conditions
Dans le fichier JavaScript, utilisez le code donné:
document.getElementByid ("d'accord").ADDEVEventListener ("Click", CheckClickFunc);fonction CheckClickFunc ()
alert ("Checkbox est cliqué");
Dans l'extrait de code ci-dessus,
- Tout d'abord, récupérez la case à cocher en utilisant son ID, puis attachez un "addEventListener ()«Méthode en passant un«Cliquez sur«Événement et une fonction»CheckClickfunc"Qui sera appelé sur la case à cocher cliquer.
- Définir une fonction "CheckClickFunc ()», Qui sera déclenché en cliquant sur la case à cocher et affiche un message d'alerte:
Sortir
Conclusion
Les événements à cocher OnClick sont des événements effectués lorsqu'une case à cocher est marquée comme «vérifié". Ces événements ne sont pas appliqués par défaut sur un élément de case à cocher du document HTML. Par conséquent, l'utilisateur doit ajouter manuellement les événements pour effectuer des fonctionnalités spécifiques. Il existe trois façons différentes d'ajouter un «sur clic»Événement et effectuant une action lors de cet événement avec l'aide de JavaScript. Cet article explique ces trois méthodes ainsi que des exemples.