boîte de sélection multiple javascript pour en sélectionner plusieurs

JavaScript est un langage de script largement utilisé qui peut être utilisé pour créer des pages Web et des applications interactives. Parmi eux, la zone de sélection multiple est un élément de formulaire couramment utilisé dans le développement Web, permettant à l'utilisateur de sélectionner une ou plusieurs options. Dans cet article, nous allons explorer comment sélectionner plusieurs cases à cocher à l'aide de JavaScript.

1. Utilisation de base de la boîte à sélection multiple HTML

Pour définir une boîte à sélection multiple en HTML, vous devez utiliser la balise et vérifié. Parmi eux, l'attribut name est utilisé pour définir le nom de la boîte à sélection multiple ; l'attribut value est utilisé pour spécifier la valeur de l'option ; l'attribut coché est utilisé pour définir l'élément sélectionné par défaut.

Par exemple, le code suivant crée une boîte à sélection multiple nommée « fruits » qui comprend trois options : pommes, bananes et oranges, où pomme est l'élément sélectionné par défaut.

<form>
  <input type="checkbox" name="fruits" value="apple" checked>苹果<br>
  <input type="checkbox" name="fruits" value="banana">香蕉<br>
  <input type="checkbox" name="fruits" value="orange">橙子
</form>

Les utilisateurs peuvent cocher ou décocher les options en cliquant sur la case à cocher. Lorsque l'utilisateur soumet le formulaire, les options sélectionnées sont soumises au serveur sous forme de données de formulaire.

2. JavaScript implémente plusieurs zones de sélection pour en sélectionner plusieurs

Bien que la fonction de zone de sélection multiple fournie par HTML soit très pratique, nous devons parfois utiliser les options sélectionnées sur le client, comme obtenir le nombre de sélections ou traiter le sélections dans une option de boucle. À l'heure actuelle, nous pouvons utiliser JavaScript pour obtenir le nombre de cases à sélection multiple sélectionnées.

1. Obtenir le nombre de cases à sélection multiple sélectionnées

Pour obtenir le nombre de cases à sélection multiple sélectionnées, nous pouvons utiliser la méthode document.querySelectorAll() pour obtenir tous les éléments de la boîte à sélection multiple sélectionnés et compter leur nombre. Cette méthode renvoie une liste de tous les éléments correspondant au sélecteur CSS spécifié. Par exemple, le code suivant obtient le nombre d'éléments sélectionnés dans la zone de sélection multiple nommée "fruits" :

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
const checkedCount = checkboxes.length;
console.log(`选中了 ${checkedCount} 个选项。`);

Dans ce code, la première ligne obtient d'abord tous les éléments de la zone de sélection multiple nommée "fruits" via le La méthode document.querySelectorAll() sélectionne les éléments et les stocke dans un objet NodeList. Notez que le sélecteur CSS 'input[name="fruits"]:checked' est utilisé pour faire correspondre les éléments de case à cocher sélectionnés. Parmi eux, l'attribut name spécifie le nom de la zone de sélection multiple à sélectionner, et la pseudo-classe :checked peut être utilisée pour sélectionner l'élément sélectionné.

La deuxième ligne calcule le nombre de cases à cocher sélectionnées via checkboxes.length. Enfin, utilisez la méthode console.log() pour afficher les résultats.

2. Traitement de la boîte à sélection multiple sélectionnée

Pour traiter la boîte à sélection multiple sélectionnée, nous pouvons utiliser un code similaire à celui ci-dessus pour obtenir l'élément de boîte à sélection multiple sélectionné, puis utiliser une boucle pour parcourir chaque élément sélectionné . Qui effectue les opérations correspondantes.

Par exemple, le code suivant parcourt les éléments sélectionnés dans la zone de sélection multiple et ajoute leurs valeurs à une chaîne :

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
let values = '';
checkboxes.forEach(checkbox => {
  values += checkbox.value + ',';
});
console.log(`选中的选项是：${values}`);

Le code obtient d'abord la liste des éléments de la zone de sélection multiple sélectionnés, puis utilise le méthode forEach() pour la parcourir pour chaque élément sélectionné. Dans le corps de la boucle, ajoutez la valeur de l'élément actuel à la variable de valeurs et affichez le résultat à la fin.

3. Résumé

Dans cet article, nous avons présenté l'utilisation de base des boîtes à sélection multiple HTML et utilisé JavaScript pour implémenter la fonction de sélection de plusieurs boîtes à sélection multiple. En obtenant le nombre de zones à sélection multiple sélectionnées et en traitant les éléments de la zone à sélection multiple sélectionnés, nous étendons la fonctionnalité de la zone à sélection multiple et fournissons une base pour la mise en œuvre d'interactions de formulaires complexes. J'espère que cet article sera utile aux développeurs Web qui apprennent et utilisent JavaScript pour gérer les zones à sélection multiple.

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!