Comment cocher / décocher la case à l'aide de JavaScript
Cet article décrira la procédure pour cocher et décocher la case à l'aide de JavaScript.
Comment cocher / décocher la case à l'aide de JavaScript?
Pour vérifier ou décocher les cases à cocher en javascript, utilisez le «vérifié" attribut. Tout d'abord, obtenez la référence de l'élément HTML "cocher"Avec l'aide de son attribution"identifiant" en utilisant le "getElementByid ()«Méthode, puis appliquez le«vérifié»Propriété sur sa valeur.
Exemple 1: Vérifiez / décochez la case à cocher unique
Tout d'abord, créez un fichier HTML, avec les lignes de code suivantes:
Cliquez sur les boutons pour vérifier ou décocher la case à cocher
D'accord avec les termes et les conditions
Dans le code ci-dessus:
- Créez une case à cocher, avec l'ID "cocher"Cela sera utilisé pour accéder à l'élément"cocher"Pour effectuer des actions.
- Créez deux boutons, "Oui" et "Non», Pour vérifier ou décocher la case qui déclenchera la fonction«vérifier()" et "Uncheck ()”Respectivement sur l'événement de clic.
Après avoir exécuté le code ci-dessus, la sortie sera comme 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 Check ()Soit l'entrée = document.getElementById ('Checkbox');
saisir.vérifié = true;
Dans le code ci-dessus:
- Définir une fonction "vérifier()"Cela déclenchera le bouton CLIC pour cocher la case à cocher.
- À l'intérieur du corps de la fonction, obtenez la référence de la case à cocher en utilisant son ID "cocher"Avec l'aide du"getElementByid ()"Méthode et le stocker dans une variable"saisir".
- Cochez la case en définissant le «vérifié" propriété "vrai".
Pour décocher la case à cocher en cliquant sur «Non”Bouton, utilisez le code indiqué ci-dessous:
fonction Uncheck ()Soit l'entrée = document.getElementById ('Checkbox');
saisir.vérifié = false;
L'extrait de code ci-dessus:
- Définir une fonction "Uncheck ()"Cela déclenchera le bouton cliquer pour décocher la case à cocher.
- À l'intérieur du corps de la fonction, obtenez la référence de la case à cocher en utilisant son ID "cocher"Avec l'aide du"getElementByid ()"Méthode et le stocker dans une variable"saisir".
- Décochez la case à cocher en définissant le «vérifié" propriété "FAUX".
Enfin, définissez une fonction pour décocher la case à cocher par défaut sur le chargement de la page à l'aide du "fenêtre.en charge" événement:
fenêtre.onload = function ()fenêtre.addEventListener («charger», check, false);
Sortir
La sortie signifie que la case à cocher est cochée et non contrôlée avec succès en cliquant sur les boutons.
Exemple 2: Vérifiez / décochez plusieurs cases à cocher
Voyons un exemple de la façon de vérifier ou de décocher toutes les cases à cocher 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«Cela basculera la case à cocher pour cocher ou décocher:
Cliquez sur le bouton pour vérifier ou décocher toutes les cases à cocher
Vérifiez ou décochez-moi
Vérifiez ou décochez-moi
Vérifiez ou décochez-moi
Vérifiez ou décochez-moi
Vérifiez ou décochez-moi
La sortie correspondante sera:
Après cela, dans un fichier ou une balise JavaScript, ajoutez le code ci-dessous pour vérifier ou décocher la liste des cases à cocher en un seul clic. Tout d'abord, obtenez la référence du bouton en utilisant son identifiant «bascule» et stockez-le dans un «bouton» variable, puis attachez un événement OnClick et invoquez une fonction «CheckAllboxes"Cela cochera la liste des cases à cocher puis appelle la fonction suivante"UncheckalLbox»:
Var Button = Document.GetElementById ("Toggle");bouton.onClick = checkAllboxes;
Pour cocher les cases, utilisez le code donné ci-dessous
fonction checkAllboxes ()Var entrée = document.queySelectorall ('.Checkbox ');
pour (var i = 0; i < input.length; i++)
entrée [i].vérifié = true;
ce.onClick = UncheckAllBoxes;
Dans ce code ci-dessus:
- Tout d'abord, définissez une fonction "CheckAllBoxes ()"Cela se déclenchera sur le bouton Cliquez pour cocher toutes les cases.
- À l'intérieur du corps de la fonction, obtenez les références de toutes les cases à cocher en utilisant leurs classes attribuées "cocher"Avec l'aide du"queySelectorall ()"Méthode et le stocker dans une variable"saisir".
- Itérer les cases à cocher et définir le «vérifié" propriété "vrai"Pour cocher toutes les cases.
- Après avoir coché toutes les cases, appelez l'autre fonction "UncheckalLbox"Sur l'événement cliquez pour basculer le bouton.
Pour décocher la liste de la case en cliquant sur le bouton, utilisez les lignes ci-dessous du code:
fonction uncheckallboxes ()Var entrée = document.queySelectorall ('.Checkbox ');
pour (var i = 0; i < input.length; i++)
entrée [i].vérifié = false;
ce.onClick = checkAllboxes;
Dans cet extrait de code ci-dessus:
- Définir une fonction "UncheckallBoxes ()"Cela se déclenchera sur le bouton Cliquez pour décocher toutes les cases.
- À l'intérieur du corps de la fonction, obtenez les références de toutes les cases à cocher en utilisant leurs classes attribuées "cocher"Avec l'aide du"queySelectorall ()"Méthode et le stocker dans une variable"saisir".
- Itérer les cases à cocher et définir le «vérifié" propriété "FAUX”Pour décocher toutes les cases.
- Après cela, appelez l'autre fonction "CheckAllboxes"Sur l'événement cliquez pour basculer le bouton.
Sortir
La sortie indique que la liste des cases à cocher est cochée avec succès ou non contrôlée avec un seul bouton.
Conclusion
Pour vérifier ou décocher les cases à cocher, utilisez le «vérifié" propriété. Après avoir obtenu la référence de l'élément "cocher"En utilisant son"identifiant"Avec l'aide du"getElementByid ()«Méthode, cochez la case en définissant le«vérifié" attribuer à "vrai". De même, définissez le «vérifié" attribuer à "FAUX"Pour décocher la case à cocher. Cet article décrit la procédure pour cocher et décocher la case à l'aide de JavaScript.