JavaScript peut être utilisé pour manipuler le comportement des éléments HTML d'une page. L'un des éléments les plus couramment utilisés serait la balise d'entrée . L'entrée est utilisée pour créer une interface utilisateur interactive (UI) dans le but de prendre des informations de l'utilisateur.

La balise d'entrée a différents types. Certains de ces types incluent un bouton, une image, une case à cocher, une radio-boîte, etc. Autre que les types, il y a divers les attributs de la balise d'entrée . Ces attributs sont compatibles avec certains types, par exemple, le vérifié L'attribut n'est pas compatible avec le type de bouton car il n'est compatible qu'avec une case à cocher ou un bouton radio.

Cocher et bien cocher la propriété

Lorsque vous créez un formulaire pour prendre des informations de l'utilisateur, vous utilisez souvent un type d'entrée appelé un cocher. Ce cocher Tire parti d'un seul attribut et c'est l'attribut vérifié \ propriété. Très brièvement, nous allons voir comment fonctionne cette case à cocher, puis nous allons la manipuler correctement en utilisant JavaScript.

Commençons par afficher une simple case dans une page HTML. Utilisez le code suivant pour créer une case à cocher:

Ceci est une case à cocher

Comme vous pouvez le voir, nous avons créé une balise d'entrée et lui a donné un nom et un identifiant, et le texte à afficher à côté.

L'extrait de code complet pour une meilleure démonstration se déroulerait comme ceci:

Tutoriel Linuxhint

Checkbox Checher la manipulation de la propriété à l'aide de JavaScript


Ceci est une case à cocher

La sortie est:

Comme nous pouvons le voir, nous avons une case à cocher affichée à l'écran. Ajoutons la propriété «cochée» afin que la case à cocher soit déjà marquée lorsque la page se charge. Pour ajouter la propriété «vérifiée», utilisez la ligne suivante dans votre code:

Ceci est une case à cocher

Nous pouvons confirmer cela en allant même aux outils de développeur du navigateur, puis dans l'onglet Propriétés, où nous pouvons voir la propriété "vérifié»Et sa valeur comme:

Nous pouvons modifier la propriété cochée en cliquant sur la case à cocher elle-même, comme:

Mais que se passe-t-il si nous voulons utiliser JavaScript pour manipuler la propriété cochée.

Comment changer la propriété vérifiée à l'aide de JavaScript

Pour utiliser JavaScript pour modifier les éléments sur le HTML, nous allons créer un déclencheur. Un déclencheur peut être n'importe quoi, il peut s'agir d'un événement, d'une place de souris ou d'un bouton. Nous aurons besoin de deux boutons. Dont l'un changera le «vérifié«Valeur de la propriété à True, et l'autre pour le changer en« False »

Créons d'abord les deux boutons en utilisant les lignes suivantes.

Vérifier
Décocher

Ces lignes créeraient les deux boutons de l'écran comme:

Il est temps de lier ces boutons avec les fonctions que nous avons définies à l'intérieur du «sur clic" propriété.

Pour créer ces deux fonctions, utilisez les commandes suivantes à l'intérieur de la balise de script .

Exécutez à nouveau le fichier et cliquez sur ces boutons pour examiner le comportement de la case à cocher.

Vous aurez ce comportement.

Comme vous pouvez le voir, nous changeons maintenant le vérifié Valeur de la propriété de la case à cocher à l'aide de JavaScript.

Conclusion

JavaScript peut être utilisé pour manipuler la valeur du «vérifié»Propriété d'un cocher à l'intérieur de étiqueter. Les éléments HTML sont souvent manipulés à l'aide de JavaScript, et ces manipulations sont souvent effectuées à la suite d'une action, peut-être après que l'utilisateur appuye sur un bouton ou cliquez quelque part à l'écran. Nous avons brièvement parcouru les cases à cocher, comment les créer, quelle est leur propriété «cochée» et comment manipuler cette propriété lorsque l'utilisateur appuie sur un bouton à l'aide de JavaScript.