Maison > Article > interface Web > Comment implémenter la fonction sélectionner tout/désélectionner tout en JavaScript ?

Comment implémenter la fonction sélectionner tout/désélectionner tout en JavaScript ?

WBOYoriginal: 2023-10-16 09:28:421257parcourir

JavaScript 如何实现全选/全不选功能？

Comment implémenter la fonction tout sélectionner/tout désélectionner en JavaScript ?

Lors du développement de pages Web, nous sommes souvent confrontés au besoin de cocher ou de décocher plusieurs cases. Cette exigence est très courante dans des scénarios tels que les listes de données et les formulaires. La fonction sélectionner tout/désélectionner tout peut être facilement implémentée à l’aide de JavaScript. Des exemples de code spécifiques sont décrits ci-dessous.

Tout d'abord, nous avons besoin d'une page HTML pour démontrer cette fonctionnalité. Voici une structure HTML de base :

<!DOCTYPE html>
<html>
<head>
  <title>全选/全不选</title>
  <script src="main.js"></script>
</head>
<body>
  <h2>全选/全不选示例</h2>
  <input type="checkbox" id="selectAll"> 全选/全不选
  <br><br>
  <input type="checkbox" class="checkbox"> 选项 1
  <input type="checkbox" class="checkbox"> 选项 2
  <input type="checkbox" class="checkbox"> 选项 3
  <input type="checkbox" class="checkbox"> 选项 4
  <input type="checkbox" class="checkbox"> 选项 5
</body>
</html>

Ensuite, nous devons écrire le code correspondant dans le fichier JavaScript. Nous pouvons écrire le code suivant dans le fichier main.js : main.js 文件中编写以下代码：

// 获取全选/全不选的复选框元素和所有选项的复选框元素
var selectAllCheckbox = document.getElementById('selectAll');
var checkboxes = document.getElementsByClassName('checkbox');

// 绑定全选/全不选的复选框的点击事件
selectAllCheckbox.addEventListener('click', function() {
  // 遍历所有选项的复选框
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = selectAllCheckbox.checked; // 将每个选项的复选框状态设为与全选/全不选的复选框状态一致
  }
});

以上代码中，我们首先通过 getElementById 和 getElementsByClassName 获取到了全选/全不选的复选框元素和所有选项的复选框元素。然后，我们通过 addEventListener 绑定了全选/全不选的复选框的点击事件。在点击事件的处理函数中，我们使用一个循环遍历所有选项的复选框，并将其状态设为与全选/全不选的复选框状态一致。

最后，我们需要将 main.js 文件与 HTML 页面相连接。可以通过以下代码将其放在 HTML 页面的 93f0f5c25f18dab9d176bd4f6de5d30e 或 6c04bd5ca3fcae76e30b72ad730ca86d

<script src="main.js"></script>

Dans le code ci-dessus, nous obtenons d'abord la sélection complète via getElementById et

getElementsByClassName code> / Élément de case à cocher pour tous les éléments non sélectionnés et case à cocher pour toutes les options. Ensuite, nous lions l'événement click de la case à cocher entièrement sélectionnée/non sélectionnée via <code>addEventListener

. Dans le gestionnaire d'événements de clic, nous utilisons une case à cocher qui parcourt toutes les options et définit son état pour qu'il soit cohérent avec l'état de la case à cocher sélectionnée/non sélectionnée.

Enfin, nous devons connecter le fichier main.js à la page HTML. Il peut être placé dans 93f0f5c25f18dab9d176bd4f6de5d30e ou 6c04bd5ca3fcae76e30b72ad730ca86d de la page HTML avec le code suivant :

rrreee

Maintenant, nous pouvons ouvrir la page HTML dans le navigateur et essayez la fonctionnalité Sélectionner tout/Désélectionner tout. Lorsque nous cliquons sur la case Sélectionner tout/Désélectionner tout, les cases à cocher de toutes les options changeront d'état en conséquence. 🎜🎜Grâce à l'exemple de code ci-dessus, nous pouvons voir comment JavaScript peut facilement implémenter la fonction tout sélectionner/tout désélectionner. Ceci est très utile pour développer des opérations de sélection par lots dans les pages Web, améliorant ainsi la commodité et l'efficacité de l'interaction utilisateur. J'espère que cet article pourra aider les lecteurs à mieux comprendre et utiliser la fonction tout sélectionner/tout désélectionner en JavaScript. 🎜

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!

JavaScript html 循环 JS 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter la fonction carrousel automatique des pages web en JavaScript ?Article suivant：Comment implémenter la fonction carrousel automatique des pages web en JavaScript ?

Articles Liés

Voir plus