Maison > Article > interface Web > Comment utiliser les cases à cocher dans les options de sélection à l'aide de JavaScript ?

Comment utiliser les cases à cocher dans les options de sélection à l'aide de JavaScript ?

PHPzavant: 2023-08-29 22:41:091264parcourir

如何使用 JavaScript 在选择选项中使用复选框？

Parfois, nous devons utiliser des cases à cocher dans les options sélectionnées. Nous pouvons permettre aux utilisateurs de sélectionner plusieurs options en introduisant des cases à cocher avec des options de sélection. Cependant, si l'on utilise plusieurs attributs de la balise pour améliorer l'expérience utilisateur.

Ici, nous utiliserons JQuery et JavaScript pour gérer la valeur de la case à cocher sélectionnée dans le menu

Créer un menu de sélection personnalisé

L'élément

Grammaire

Les utilisateurs peuvent utiliser JavaScript pour gérer les cases à cocher des menus déroulants personnalisés selon la syntaxe suivante.

function showOptions() {
   if (showCheckBoxes) {
      // show options div
      showCheckBoxes = false;
   } else {
      // hide options div
      showCheckBoxes = true;
   }
}

function getOptions() {
   // selectedOptions is an array containing all checked checkboxes      
   var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
}

Dans la syntaxe ci-dessus, nous affichons les options de la liste déroulante personnalisée en fonction de la valeur de la variable showCheckBoxes. De plus, nous pouvons parcourir le tableau selectedOptions pour obtenir toutes les cases sélectionnées une par une.

Étapes

Étape 1 - Créez un div contenant le texte du menu.
Étape 2 - Maintenant, utilisez du HTML personnalisé et utilisez le type de saisie de case à cocher pour les options.
Étape 3 - Ajoutez l'événement onClick sur l'élément div. Lorsque l'utilisateur clique sur le div, il doit appeler le menu showOptions().
Étape 4 - En JavaScript, déclarez la variable showCheckBoxes et initialisez-la avec une vraie valeur booléenne. Nous afficherons les options de la liste déroulante personnalisée en fonction de la variable showCheckBoxes.
Étape 5 - Chaque fois que l'utilisateur clique sur l'élément div déroulant, modifiez l'affichage des options div en fonction de la valeur de la variable showCheckBoxes.
Étape 6 - Maintenant, définissez une fonction getOptions(). Dans la fonction getOptions(), accédez à toutes les cases à cocher sélectionnées et imprimez les valeurs de toutes les cases à cocher sélectionnées en itérant sur le tableau selectedOptions à l'aide d'une boucle for.

Exemple 1

Dans l'exemple ci-dessous, nous avons créé un menu de sélection personnalisé comme expliqué dans l'algorithme ci-dessus. Les utilisateurs peuvent sélectionner plusieurs options en cochant plusieurs cases.

De plus, lorsque l'utilisateur clique sur le bouton "Obtenir les cases à cocher sélectionnées", il appelle la fonction getOptions() et imprime les valeurs de toutes les cases à cocher sélectionnées, afin que nous puissions obtenir toutes les options sélectionnées du menu de sélection.

<html>
<head>
   <style>
      .dropdown {
         width: 12rem;
         height: 1.5rem;
         font-size: 1.3rem;
         padding: 0.6 0.5rem;
         background-color: aqua;
         cursor: pointer;
         border-radius: 10px;
         border: 2px solid yellow;
      }
      #options {
         margin: 0.5rem 0;
         width: 12rem;
         background-color: lightgrey;
         display: none;
         flex-direction: column;
         border-radius: 12px;
      }
      label {
         padding: 0.2rem;
      }
      label:hover {
         background-color: aqua;
      }
      button {
         font-size: 1rem;
         border-radius: 10px;
         padding: 0.5rem;
         background-color: yellow;
         border: 2px solid green;
         margin: 1rem 0;
      }
   </style>
</head>
<body>
   <h2>Creating the custom dropdown menu to use <i>Checkboxes</i> as an option.
   </h2>
   <div class = "dropdown" onclick = "showOptions()">
      show all options
   </div>
   <div id = "options">
      <label for = "one">
         <input type = "checkbox" id = "one" value = "First Option" />
            First Option
      </label>
      <label for = "two">
         <input type = "checkbox" id = "two" value = "Second Option" />
            Second Option
      </label>
      <label for = "three">
         <input type = "checkbox" id = "three" value = "Third Option" />
            Third Option
      </label>
      <label for = "four">
         <input type = "checkbox" id = "four" value = "Fourth Option" />
            Fourth Option
      </label>
      <label for = "five">
         <input type = "checkbox" id = "five" value = "Fifth Option" />
            Fifth Option
      </label>
   </div>
   <div id = "output"> </div>
   <button onclick = "getOptions()"> Get all Selected Checkboxes </button>
   <script>
      let output = document.getElementById('output');
      var showCheckBoxes = true;

      function showOptions() {
         var options =
            document.getElementById("options");

         if (showCheckBoxes) {
            options.style.display = "flex";
            showCheckBoxes = !showCheckBoxes;
         } else {
            options.style.display = "none";
            showCheckBoxes = !showCheckBoxes;
         }
      }
      function getOptions() {
         var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
         output.innerHTML = "The selected options are given below. <br/>";
         for (var i = 0; i < selectedOptions.length; i++) {
            output.innerHTML += selectedOptions[i].value + " , ";
            console.log(selectedOptions[i])
         }
      }
   </script>
</body>
</html>

Dans ce didacticiel, les utilisateurs ont appris à créer un menu de sélection personnalisé en utilisant HTML, CSS et JavaScript. De plus, les utilisateurs peuvent créer des menus de sélection avec des cases à cocher à l'aide de certaines bibliothèques CSS comme Bootstrap.

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 jquery css bootstrap html for 循环事件算法

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：En quoi la méthode Promise.any() est-elle différente de la méthode Promise.race() en JavaScript ?Article suivant：En quoi la méthode Promise.any() est-elle différente de la méthode Promise.race() en JavaScript ?

Articles Liés

Voir plus