Cet article démontrera les méthodes pour cocher et décocher toutes les cases à cocher à l'aide de JavaScript.
Comment cocher et décocher toutes les cases à l'aide de JavaScript ?
Pour cocher et décocher toutes les cases à cocher en JavaScript, vous pouvez appliquer :
- ' document.getElementsByName ” méthode avec cases à cocher
- ' document.getElementsByName ” méthode avec des boutons
Les approches mentionnées seront maintenant discutées une par une !
Méthode 1 : cochez et décochez toutes les cases à cocher en JavaScript à l'aide de la méthode « document.getElementsByName() » avec « cases à cocher »
La ' document.getElementsByName() ” La méthode renvoie les éléments avec le nom spécifié dans ses arguments. Cette méthode sera appliquée pour récupérer la valeur de chaque case à cocher à l'aide du nom passé.
Passons en revue l'exemple suivant pour la démonstration.
Exemple
Tout d'abord, le type d'entrée sera spécifié comme ' case à cocher ' et un nom et une valeur spécifiques seront attribués à chaque case à cocher :
< type d'entrée = 'case à cocher' Nom = 'juste' évaluer = 'Python' > Python < Br />< type d'entrée = 'case à cocher' Nom = 'juste' évaluer = 'Java' > Java < Br />
< type d'entrée = 'case à cocher' Nom = 'juste' évaluer = 'JavaScript' > Javascript < Br />
Maintenant, incluez une case à cocher supplémentaire avec la valeur ' Vérifie tout » et joignez un « sur clic() ' avec cette case à cocher qui fonctionnera de telle manière lorsque la case sera cliqué, le ' checkUnchecked ()' sera appelée avec l'objet ' cette » comme argument :
< type d'entrée = 'case à cocher' sur clic = 'cocherDécocher(ceci)' /> Vérifie tout < Br />
Après cela, définissez une fonction nommée ' checkDécochez() ' dans le fichier JavaScript, avec une variable nommée ' case à cocher » comme argument. Maintenant, accédez aux valeurs des cases à cocher en utilisant le ' document.getElementsByName() ” méthode et placez la valeur de la “ Nom ” attribut comme argument.
Enfin, appliquez un ' pour ' boucle pour itérer le long de toutes les valeurs de case à cocher et utiliser le ' vérifié ” propriété pour les marquer tous comme cochés :
fonction cocherDécocher ( case à cocher ) {obtenir = document. getElementsByName ( 'juste' ) ;
pour ( était dans = 0 ; je < obtenir. longueur ; je ++ ) {
obtenir [ je ] . vérifié = case à cocher. vérifié ; }
}
Comme vous pouvez le voir, lorsque le ' Vérifie tout ” est cochée, toutes les autres cases sont également cochées :
Méthode 2: Cochez et décochez toutes les cases à cocher en JavaScript à l'aide de la méthode 'document.getElementsByName()' avec 'Buttons'
La ' document.getElementsByName() ', comme indiqué dans la méthode précédente, récupère les éléments avec le nom spécifié dans ses arguments. Il peut être utilisé pour cocher ou décocher toutes les cases à cocher ajoutées sur une page Web.
Regardez l'exemple suivant pour la démonstration.
Exemple
Maintenant, nous allons inclure deux boutons pour le ' Vérifie tout ' et ' Décocher tout ” fonctionnalités. Ensuite, joignez un ' sur clic ” événement avec les deux boutons qui accéderont aux fonctions spécifiées séparément :
< type d'entrée = 'bouton' sur clic = 'Chèque()' évaluer = 'Tout vérifier' />< type d'entrée = 'bouton' sur clic = 'décocher()' évaluer = 'Désélectionne tout' />
Ensuite, définissez une fonction nommée ' Chèque() ' et appliquer le ' document.getElementsByName ” méthode avec la valeur spécifiée de la “ Nom ' attribut. Ensuite, itérez le ' pour ” boucle le long de toutes les valeurs de case à cocher décrites dans la méthode précédente.
De plus, lorsque le bouton associé est cliqué, le ' vérifié ' la propriété cochera toutes les cases et définira l'état coché sur ' vrai ” :
contrôle de fonctionnement ( ) {être chèvre = document. getElementsByName ( 'Chèque' ) ;
pour ( était dans = 0 ; je < obtenir. longueur ; je ++ ) {
obtenir [ je ] . vérifié = vrai ; }
}
Ensuite, définissez une fonction nommée ' Décocher() », et ajoutez-y la fonctionnalité inverse pour marquer la propriété de la case cochée comme « faux ” :
fonction décocher ( ) {être chèvre = document. getElementsByName ( 'Chèque' ) ;
pour ( était dans = 0 ; je < obtenir. longueur ; je ++ ) {
obtenir [ je ] . vérifié = faux ; }
}
Il peut voir dans la sortie que les boutons ajoutés fonctionnent parfaitement :
Nous avons fourni les méthodes les plus simples pour cocher et décocher toutes les cases à l'aide de JavaScript.
Conclusion
Pour cocher et décocher toutes les cases à l'aide de JavaScript, utilisez le ' document.getElementsByName() 'méthode avec' Cases à cocher ' pour ajouter une case à cocher et accéder à la fonction, ce qui aura pour effet de faire cocher les cases ou appliquer la même méthode avec ' Boutons ” pour inclure deux boutons séparément pour cocher et décocher toutes les valeurs spécifiées. Cet article expliquait les méthodes pour cocher et décocher toutes les cases à cocher à l'aide de JavaScript.