Maison > interface Web > js tutoriel > Comment implémenter une case à cocher multi-entrées en JavaScript simple ?

Comment implémenter une case à cocher multi-entrées en JavaScript simple ?

WBOY
Libérer: 2023-09-07 20:53:02
avant
967 Les gens l'ont consulté

如何在普通 JavaScript 中实现多输入复选框?

Nous apprendrons comment implémenter une case à cocher multi-entrées. Le sélecteur d'entrée de case à cocher aura la fonctionnalité suivante -

  • Plusieurs options peuvent être sélectionnées à l'aide de cases à cocher.

  • Les options sélectionnées seront affichées dans une liste distincte.

  • Chaque option sélectionnée fournira une icône de suppression pour décocher/supprimer cette option.

Une autre chose à noter est que nous n'utiliserons aucune bibliothèque tierce pour implémenter ces fonctionnalités, tout sera écrit en HTML + JavaScript + CSS uniquement.

Méthode

  • Nous aurons un objet dont la clé sera utilisée comme étiquette pour la saisie de la case à cocher et la valeur (vrai/faux) sera utilisée comme attribut coché.

  • Nous rendrons ensuite chaque clé de l'objet.

  • Nous restituerons la liste chaque fois que le statut d'une option change.

  • De même, après avoir cliqué sur l'icône de suppression, nous mettrons à jour les options et restituerons la liste.

Exemple

Regardons donc le même code -

<!DOCTYPE html>
<html>
<head>
   <title>Multiple input Checkbox</title>
   <style>
      #holder {
         background: #ddd;
         min-height: 35px;
         border-radius: 5px;
         padding: 5px;
         overflow-y: scroll;
         display: flex;
         align-items: center;
         flex-direction: row;
      }
      #box {
         display: flex;
         flex-direction: column;
      }
      .divison {
         margin: 15px 0;
      }
      .item {
         margin: 0;
         margin-right: 5px;
         padding: 0;
      }
      .itemHolder {
         display: flex;
         margin-right: 20px;
         flex-direction: row;
         align-items: center;
         padding: 5px 10px;
         border: 1px solid #aaa;
      }
   </style>
</head>
<body>
   <div id='holder'></div>
   <div id='box'></div>
</body>
   <script>
      const options = {
         'Red': false,
         'Green': false,
         'Yellow': false,
         'Orange': false,
         'Blue': false,
         'Black': false,
         'Cyan': false,
         'Magenta': false,
         'Pink': false
    };
   const renderOptions = () => {
      const holder = document.getElementById('holder');
      holder.innerHTML = '';
      for (const key of Object.keys(options)) {
         if (options[key]) {
            const cancelIcon = document.createElement('span');
            cancelIcon.innerText = 'x';
            cancelIcon.style.cursor = 'pointer';
            cancelIcon.onclick = () => handleClick(key);
            const item = document.createElement('div');
            const element = document.createElement('p');
            element.innerText = key;
            element.style.color = key.toLowerCase();
            element.classList.add('item');
            item.appendChild(element);
            item.appendChild(cancelIcon);
            item.classList.add('itemHolder');
            holder.appendChild(item);
         }
      }
   };
   const handleClick = (label) => {
      options[label] = !options[label];
      renderCheckbox();
      renderOptions();
   };
   const renderCheckbox = () => {
      const box = document.getElementById('box');
      box.innerHTML = '';
      for (const key of Object.keys(options)) {
         const divison = document.createElement('div');
         const input = document.createElement('input');
         const label = document.createElement('label');
         divison.classList.add('divison');
         input.id = key;
         label.innerText = key;
         label.for = key;
         input.type = 'checkbox';
         input.value = key;
         input.checked = options[key];
         input.onchange = () => handleClick(key);
         divison.appendChild(input);
         divison.appendChild(label);
         box.appendChild(divison);
      }
   };
   renderCheckbox();
   </script>
</html>
Copier après la connexion

Instructions

  • Le code ci-dessus crée une page Web qui affiche un ensemble de cases à cocher.

  • Chacun a une étiquette de couleur différente (rouge, vert, jaune, etc.).

  • Lorsque la case est cochée, l'étiquette de couleur correspondante sera affichée dans le div "holder" en haut de la page.

  • L'étiquette affiche également un "x" qui, lorsque vous cliquez dessus, désélectionne la case à cocher et supprime l'étiquette du div "holder".

  • Le code utilise JavaScript pour manipuler le DOM et gérer la sélection et la désélection des cases à cocher.

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!

source:tutorialspoint.com
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal