Comment créer un menu d'options de sélection semblable à une case à cocher ?

Création d'un menu d'options de sélection semblable à une case à cocher

Certains utilisateurs peuvent être confrontés à l'obligation d'afficher un menu d'options de sélection avec des cases à cocher, une demande qui les éléments HTML traditionnels ne peuvent pas remplir directement. Si vous rencontrez ce dilemme, n'ayez crainte, car nous présentons une solution de contournement combinant HTML, CSS et JavaScript pour simuler la fonctionnalité souhaitée.

Le code fourni ci-dessous exploite une liste masquée de cases à cocher et bascule dynamiquement leur visibilité lors de l'interaction. avec un élément Select Option. Voici une répartition détaillée :

Code HTML :

La structure HTML crée un élément Select Option standard contenant une option d'espace réservé. En dessous, un div caché (avec son affichage initialement défini sur "aucun") contient les cases à cocher.

Code CSS :

• Le div "multiselect" définit le style général du menu.
• "selectBox" positionne l'élément Select Option verticalement et le superpose avec "overSelect" div.
• "overSelect" couvre l'option de sélection et sert de zone cliquable pour afficher ou masquer les cases à cocher.
• "checkboxes" régit l'apparence de la liste des cases à cocher.

Code JavaScript :

La fonction JavaScript "showCheckboxes" bascule l'affichage des cases à cocher div. Il est déclenché lorsque l'utilisateur clique sur l'option de sélection.

Utilisation :

Pour utiliser cette solution, ajoutez vos propres éléments d'option de sélection préférés et les étiquettes des cases à cocher au code HTML. et stylisez-le selon vos besoins.

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!