Comment vérifier si CheckBox est coché à l'aide de JavaScript

La case à cocher est un type d'entrée HTML qui agit comme une boîte de sélection. Il est utilisé pour sélectionner ou désélectionner une certaine option. Les cases à cocher sont fréquemment utilisées pour permettre aux visiteurs de s'engager avec les pages Web et de publier souvent des données sur un backend en cochant la case qui s'applique à une certaine condition.

Ce manuel démontrera la technique pour vérifier si la case à cocher est cochée ou non.

Comment vérifier si CheckBox est coché à l'aide de JavaScript?

Pour déterminer si la case à cocher est cochée, utilisez le «vérifié" propriété. Comme nous le savons, chaque élément contient quelques caractéristiques qui permettent à JavaScript de le contrôler de certaines manières et la propriété cochée de la case est l'une d'entre elles. La propriété cochée donne la valeur booléenne vraie ou false lorsqu'une case à cocher est sélectionnée.

Exemple 1: Utilisation de l'événement OnClick () pour vérifier si la boîte à cocher est cochée
Nous allons d'abord créer une case à cocher attachant le «sur clic()«Événement qui invoquera le« défini par l'utilisateur »Boxchecked ()”Fonction Pour vérifier si la case à cocher est cochée ou non:

Cochez la case pour accepter les termes et conditions:

J'accepte tous les termes et conditions.

Dans le fichier JavaScript, nous définirons une fonction nommée «Boxchecked ()», Qui va d'abord récupérer l'ID de la case à cocher en utilisant le«getElementByid ()«Méthode, puis appliquez la propriété cochée de telle manière que la valeur renvoyée vérifiée soit définie sur«vrai"S'il est marqué comme vérifié. Ensuite, une alerte sera affichée avec le message "La case à cocher est cochée! Merci d'accepter:»:

fonction boxchecked ()
var checkbox = document.getElementById ("Checkbox");
if (coche.vérifié == true)
alerte ("La case est cochée! Merci d'accepter:");

La sortie correspondante est indiquée ci-dessous:

Exemple 2: Utilisation de la méthode addEventListener () pour vérifier si CheckBox est coché
Ici, nous créerons une case à cocher sans événement onclick (). Ensuite, nous ajouterons un paragraphe, et son écran est défini comme «aucun”Jusqu'à ce que la case à cocher ne soit pas contrôlée. Dans l'autre cas, lorsque la case à cocher est marquée comme coché, son texte ajouté sera affiché en couleur verte:

J'accepte tous les termes et conditions.

VÉRIFIÉ!

Vous pouvez également vérifier si la case à cocher est cochée ou non sans utiliser l'événement onClick (). Ici, nous utiliserons une autre méthode appelée «addEventListener ()" avec le "QuerySelector ()«Méthode à l'aide de la propriété cochée de la boîte à cocher. Cela fonctionnera de telle manière que la méthode QuerySelector () sélectionnera d'abord le premier élément correspondant à l'ID ajouté, puis la méthode AddEventListener () associera le "Cliquez sur»Événement avec ça:

var text = document.getElementById ("texte");
document.queySelector ('# Checkbox').addEventListener ('click', (événement) =>
if (événement.cible.vérifié)
texte.style.display = "block";

)

On peut voir que, lorsque la case est marquée, le contenu ajouté s'affiche en couleur verte:

Tout ce que vous devez savoir sur la façon de déterminer si une case à cocher est marquée ou non vous a été fourni.

Conclusion

Pour déterminer si la case à cocher est cochée, utilisez la case à cocher «vérifié" propriété. La propriété vérifiée sort une valeur booléenne True si elle est vérifiée; Sinon, ça donne faux. Pour la vérification, vous pouvez utiliser deux procédures différentes; L'un est l'événement onclick (), et l'autre est la méthode AddeveventListener (). Dans ce manuel, nous avons décrit la procédure pour vérifier si la case à cocher est cochée ou non en utilisant JavaScript.