Wie erstelle ich ein Kontrollkästchen-ähnliches Auswahloptionsmenü?

Erstellen eines Kontrollkästchen-ähnlichen Auswahloptionsmenüs

Einige Benutzer stoßen möglicherweise auf die Anforderung, ein Auswahloptionsmenü mit Kontrollkästchen anzuzeigen Herkömmliche HTML-Elemente können diese nicht direkt erfüllen. Wenn Sie auf dieses Dilemma stoßen, brauchen Sie sich keine Sorgen zu machen, denn wir präsentieren eine Problemumgehung, die HTML, CSS und JavaScript kombiniert, um die gewünschte Funktionalität zu simulieren.

Der unten bereitgestellte Code nutzt eine versteckte Liste von Kontrollkästchen und schaltet deren Sichtbarkeit bei Interaktion dynamisch um mit einem Select Option-Element. Hier ist eine detaillierte Aufschlüsselung:

HTML-Code:

Die HTML-Struktur erstellt ein Standardelement „Select Option“, das eine Platzhalteroption enthält. Darunter enthält ein verstecktes Div (dessen Anzeige zunächst auf „none“ eingestellt ist) die Kontrollkästchen.

CSS-Code:

• Das „Multiselect“-Div Definiert den Gesamtstil für das Menü.
• „selectBox“ positioniert das Select Option-Element vertikal und überlagert es mit dem „overSelect“ div.
• „overSelect“ deckt die Auswahloption ab und dient als anklickbarer Bereich zum Ein- oder Ausblenden der Kontrollkästchen.
• „checkboxes“ bestimmt das Erscheinungsbild der Kontrollkästchenliste.

JavaScript-Code:

Die JavaScript-Funktion „showCheckboxes“ schaltet um die Anzeige der Checkboxen div. Es wird ausgelöst, wenn der Benutzer auf die Option „Auswählen“ klickt.

Verwendung:

Um diese Lösung zu verwenden, fügen Sie dem HTML-Code Ihre eigenen bevorzugten Elemente „Option auswählen“ und Kontrollkästchenbeschriftungen hinzu und gestalten Sie es nach Ihren Wünschen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Kontrollkästchen-ähnliches Auswahloptionsmenü?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!