Comment obtenir la valeur de la case à cocher dans JavaScript

Dans JavaScript, l'obtention d'une valeur de case à cocher apporte une facilité à l'utilisateur lors de la confirmation des options sélectionnées. De plus, dans le cas de la soumission d'un formulaire important, l'obtention d'une valeur de case à cocher aide à saisir des informations précises. De plus, sélectionner plusieurs options pour une réponse dans un quiz ou un questionnaire et obtenir la valeur de la case à cocher aide à trouver la bonne solution.

Cet article vous guidera pour obtenir / récupérer les valeurs de case à cocher dans JavaScript.

Comment obtenir / récupérer la valeur de la boîte à cocher dans JavaScript?

Pour obtenir la valeur de la case à cocher dans JavaScript, vous pouvez utiliser:

• • "document.queySelectorall ()" méthode
  • "document.getElementbyid" méthode

Nous allons maintenant passer par chacune des méthodes une par une!

Méthode 1: Obtenez la valeur de la boîte à cocher dans JavaScript à l'aide du document.Méthode QueySelectorall ()

Le "document.queySelectorall ()»La méthode renvoie tous les éléments correspondant à un sélecteur CSS. Vous pouvez également utiliser cette méthode pour sélectionner les valeurs de case à cocher spécifiées.

Syntaxe

document.QuerySelectorall (sélecteurs CSS)

Ici, "Sélecteurs CSS”Reportez-vous au nom des cases à cocher définie dans le fichier HTML.

Passez par l'exemple suivant pour la démonstration:

Exemple

Dans la première étape, nous attribuerons un «étiqueter”Attribut qui spécifie une étiquette pour un élément HTML d'entrée d'un formulaire. Après cela, nous ajouterons le type d'entrée "cocher«Pour utiliser la case à cocher comme entrée. Maintenant, nous allons attribuer "nom","valeur", et "identifiant"Pour chaque case. Enfin, nous inclurons également un bouton pour obtenir la valeur de la case à cocher. Ces processus seront répétés pour chacune des trois cases à cocher:

Sélectionnez votre langue préférée

Python
Java
Javascrip

Obtenir le sujet sélectionné

Dans l'étape suivante, nous allons récupérer le bouton "identifiant" en utilisant "document.QuerySelector ()«Méthode et ajoutez le«Cliquez sur”Événement sur le bouton. Ensuite, incluez le «document.queySelectorall ()”Méthode dans l'événement Click pour sélectionner les valeurs des cases à cocher spécifiées. Enfin, appliquez le «pousser()«Méthode pour afficher la valeur de chaque case sélectionnée à l'aide de la«document.écrire()" méthode:

La sortie de l'implémentation ci-dessus entraînera:

Méthode 2: Obtenez la valeur de la boîte à cocher dans JavaScript à l'aide du document.Méthode GetElementById ()

Le "document.getElementByid ()”La méthode renvoie un élément avec une valeur ou un ID spécifié. Il peut également être utilisé pour récupérer la case à cocher "identifiant»Et renvoyez la valeur de chaque case sélectionnée.

Syntaxe

document.GetElementByid (EleMedId)

Ici le "élémentID" fait référence à la valeur ID d'un élément dont la valeur sélectionnée va être récupérée.

Passons par l'exemple suivant pour la démonstration.

Exemple

Tout d'abord, nous spécifierons le type d'entrée à «cocher»Et attribuez le«identifiant","classe", et "valeur«À chaque case à cocher comme discuté dans la méthode précédente. Nous contiendrons ces fonctionnalités dans une étiquette nommée Données de table «". De même, nous inclurons un bouton avec un «sur clic«Événement qui accédera à la fonction«getCheckBoxValue ()»:

Sélectionnez votre langue préférée

Python:
Java:
Javascript:
Soumettre

Maintenant, nous déclarerons une fonction nommée «getCheckBoxValue ()«Pour récupérer l'ID de chaque case à cocher en utilisant le«document.getElementByid ()" méthode. Ensuite, nous créerons une variable "résultat», Dans lequel la valeur résultante de la case sélectionnée sera stockée.

Enfin, nous ajouterons différentes conditions pour chaque case à cocher en utilisant «sinon»Déclarations. Ces déclarations fonctionneront de telle manière que si une case spécifique est sélectionnée ou marquée comme coché, le document.La méthode getElementById () accédera à son identifiant, et la valeur correspondante contre cet ID particulier sera affichée. Enfin, affichez le contenu de la valeur de case à cocher Store:

La sortie de l'implémentation ci-dessus entraînera:

Nous avons fourni toutes les méthodes les plus simples pour obtenir des valeurs de case à cocher dans JavaScript.

Conclusion

Pour obtenir la valeur de la case à cocher en JavaScript, vous pouvez utiliser le «document.queySelectorall ()”Méthode pour sélectionner les cases à cocher spécifiées ou"document.getElementbyid«Méthode pour obtenir le«identifiant”Contre chacune des cases sélectionnées et afficher sa valeur correspondante. Cet article a expliqué les méthodes pour obtenir des valeurs de case à cocher dans JavaScript.