Comment créer une case à cocher dans une option de sélection à l'aide de HTML, CSS et JavaScript ?

Box à cocher dans l'option de sélection : une solution utilisant HTML, CSS, JavaScript

L'ajout direct d'une case à cocher dans un menu d'options de sélection n'est pas réalisable. Cependant, une fonctionnalité similaire peut être obtenue en utilisant une solution de contournement impliquant HTML, CSS et JavaScript.

Création de l'interface

Le HTML et le CSS créent un menu d'options de sélection avec un div cliquable supplémentaire qui masque et affiche une liste de cases à cocher. Le div imite l'apparence d'un menu d'options de sélection et, lorsque vous cliquez dessus, bascule la visibilité des cases à cocher.

JavaScript Logic

La fonction JavaScript bascule la propriété d'affichage du conteneur de cases à cocher, garantissant qu'il est visible ou masqué en fonction de l'interaction de l'utilisateur avec la boîte de sélection div.

Exemple de mise en œuvre :

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div>

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

Cette approche fournit la fonctionnalité souhaitée d'un menu d'options de sélection avec une case à cocher intégrée, offrant une plus grande flexibilité dans la conception du formulaire.

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!