mabue88
Goto Top

HTML - Auswahllisten mit Mehrfachauswahl ähnlich Checkbox?

Hallo,

gibt es eine HTML-Auswahlliste, deren Einträge wie eine Art Checkbox ausgewählt und wieder abgewählt werden können?

Aktuell verwende ich eine "select"-Auswahlliste mit dem Attribut "multiple". Um mehrere Einträge zu markieren muss ich damit aber die "Umschalt"- oder "Shift"-Taste drücken.

Perfekt wäre es, wenn die Auswahl eines Eintrags mit jedem Klick toggelt.

Danke
mabue

Content-ID: 246583

Url: https://administrator.de/forum/html-auswahllisten-mit-mehrfachauswahl-aehnlich-checkbox-246583.html

Ausgedruckt am: 06.04.2025 um 11:04 Uhr

certifiedit.net
certifiedit.net 15.08.2014 um 11:51:28 Uhr
Goto Top
Ja, vermutlich mit Javascript. Ansonsten, nein.
Arano
Lösung Arano 15.08.2014, aktualisiert am 28.08.2014 um 10:34:16 Uhr
Goto Top
Hi,

was spricht denn gegen Checkboxen !?
  <input type="checkbox name="lieblingsfarben" id="aw1" value="r"><label for=aw1">Rot</label>  
  <input type="checkbox name="lieblingsfarben" id="aw2" value="g"><label for=aw2">Gr&uuml;n</label>  
  <input type="checkbox name="lieblingsfarben" id="aw3" value="b"><label for=aw3">Blau</label>  

Mit CSS lässt du die Input-Felder ausblenden und gibst den Labels gewünschte Hintergrundfarben,bilder, schriftgröße,arten,farben,ect.
unter anderem
  /* mit einer CSS-Class wäre es besser / übersichtlicher */
  input[type="checkbox"] { display:none; } 
  input[type="checkbox"] label { /* normal */ } 
  input[type="checkbox"]:hover label { /* normal mouseover */ } 
  input[type="checkbox"]:checked + label { /* ausgewählt */ } 
  input[type="checkbox"]:cheched:hover + label { /* ausgewählt mouseover */ } 

Die Labels dann noch eckig machen, rahmenfarbe und schon siehts wie ein Select aus bloß ohne Scrollbalken...
...wenn man das noch in ein DIV steckt und diesen aus "overflow:scoll" setzt... dan... könnte man mal probieren

Kontra JS
PRO CSS face-wink


~Arano
colinardo
Lösung colinardo 15.08.2014, aktualisiert am 28.08.2014 um 10:34:14 Uhr
Goto Top
Moin,
Zitat von @Arano:
was spricht denn gegen Checkboxen !?
schließe mich @Arano an. Hier ein Beispiel wie es nach seinem Vorschlag aussehen könnte: http://jsfiddle.net/7bfnqj65/1/
(nur die Pseudoklassen muss man auf den Label setzen)

Grüße Uwe
mabue88
mabue88 28.08.2014 um 10:36:09 Uhr
Goto Top
Hallo,

das mit den Checkboxen sieht wirklich gut aus. So werde ich das wohl machen!

Danke!


PS: Mit JavaScript habe ich eine Auswahlliste so automatisiert, dass die gewünschte Funktion aus gegeben wäre. Der Aufwand war aber recht hoch...