Comment utiliser JavaScript dans l'étiquette

Créez des cases à cocher et contrôlez leur statut sélectionné

Avec le développement continu du développement front-end, JavaScript est devenu un langage de script indispensable, qui peut réaliser l'interaction des pages, les effets dynamiques, la vérification des formulaires et d'autres fonctions. Cet article explique comment utiliser JavaScript pour créer une case à cocher dans une étiquette et contrôler son état sélectionné.

1. Créez une case à cocher

1. Utilisez la balise d'entrée pour créer une case à cocher

L'essence de la case à cocher est un élément de formulaire de type d'entrée. Nous pouvons utiliser la balise cases à cocher. Bien sûr, nous devons également définir un attribut id et un attribut value pour la case à cocher.

Par exemple :

De cette façon, nous créons une case à cocher avec l'identifiant "checkbox1" et la valeur "checkbox1" 1 " case à cocher.

2. Utilisez l'étiquette pour associer la case à cocher

Pour faciliter l'utilisation, nous pouvons associer la case à cocher à l'étiquette. De cette façon, lorsque l'utilisateur clique sur l'étiquette de l'étiquette, la case à cocher correspondante sera automatiquement cochée.

Pour associer la case à cocher à l'étiquette d'étiquette, il vous suffit d'utiliser l'attribut for dans l'étiquette d'étiquette et de le définir sur la valeur id de la case à cocher correspondante.

Par exemple :

checkbox1

De cette façon, lorsque l'utilisateur clique sur le label "Checkbox 1", la case correspondante sera automatiquement cochée.

2. Contrôlez l'état sélectionné de la case à cocher

Maintenant, nous avons créé une case à cocher et l'avons associée à la balise label. Ensuite, nous pouvons utiliser JavaScript pour contrôler l'état sélectionné de la case à cocher.

1. Récupérez la case à cocher

Nous pouvons utiliser la méthode getElementById pour obtenir l'élément DOM de la case à cocher. Par exemple :

var checkbox1 = document.getElementById("checkbox1");

De cette façon, nous obtenons l'élément DOM de la case à cocher avec l'identifiant "checkbox1".

2. Définir l'état coché de la case à cocher

Pour définir l'état coché de la case à cocher, nous pouvons utiliser l'attribut coché. Si la valeur de cet attribut est vraie, cela signifie que la case est cochée ; si la valeur de cet attribut est fausse, cela signifie que la case n'est pas cochée.

Par exemple :

checkbox1.checked = true ; // Cochez la case
checkbox1.checked = false ; // Décochez la case

3. Écoutez les modifications dans la case à cocher

Si nous voulons effectuer certaines opérations. lorsque l'état de la case à cocher change, vous pouvez le faire en écoutant l'événement de changement de la case à cocher.

Par exemple :

checkbox1.addEventListener("change", function() {
if (this.checked) {

console.log("复选框被选中了");

} else {

console.log("复选框被取消了选中状态");

}
});

De cette façon, lorsque la case à cocher state Lorsqu'un changement se produit, l'événement de changement est déclenché et les opérations correspondantes sont effectuées.

3. Utilisez JavaScript pour créer plusieurs cases à cocher

Si nous devons créer plusieurs cases à cocher, nous pouvons les créer dynamiquement via JavaScript, puis les ajouter à la page.

Par exemple :

var checkboxWrapper = document.getElementById("checkboxWrapper"); // Récupère l'élément conteneur
for (var i = 1; i <= 5; i++) {
var checkbox = document.createElement( "input "); // Créer un élément d'entrée
checkbox.type = "checkbox"; // Définir le type d'entrée sur checkbox
checkbox.id = "checkbox" + i; // Définir l'identifiant
checkbox.value = "checkbox " + i; // Définir la valeur
var label = document.createElement("label"); // Créer un élément d'étiquette
label.setAttribute("for", "checkbox" + i); // Combiner l'étiquette et la case à cocher
étiquette. innerHTML = "checkbox" + i; // Définir le texte de l'étiquette
checkboxWrapper.appendChild(checkbox); // Ajouter la case à cocher au conteneur
checkboxWrapper.appendChild(label); De cette façon, nous créons dynamiquement 5 cases à cocher et les ajoutons à l'élément conteneur avec l'identifiant "checkboxWrapper".

Résumé

En utilisant JavaScript, vous pouvez facilement créer une case à cocher dans la balise d'étiquette et contrôler son état coché via l'attribut vérifié et l'événement de changement. Dans le même temps, nous pouvons également utiliser JavaScript pour créer dynamiquement plusieurs cases à cocher afin d'obtenir des fonctions plus flexibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!