Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

HTML - Auswahllisten mit Mehrfachauswahl ähnlich Checkbox?

Frage Entwicklung Webentwicklung

Mitglied: mabue88

mabue88 (Level 2) - Jetzt verbinden

15.08.2014, aktualisiert 28.08.2014, 2349 Aufrufe, 4 Kommentare, 2 Danke

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
Mitglied: certifiedit.net
15.08.2014 um 11:51 Uhr
Ja, vermutlich mit Javascript. Ansonsten, nein.
Bitte warten ..
Mitglied: Arano
LÖSUNG 15.08.2014, aktualisiert 28.08.2014
Hi,

was spricht denn gegen Checkboxen !?
01.
  <input type="checkbox name="lieblingsfarben[]" id="aw1" value="r"><label for=aw1">Rot</label> 
02.
  <input type="checkbox name="lieblingsfarben[]" id="aw2" value="g"><label for=aw2">Gr&uuml;n</label> 
03.
  <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
01.
  /* mit einer CSS-Class wäre es besser / übersichtlicher */ 
02.
  input[type="checkbox"] { display:none; } 
03.
  input[type="checkbox"] label { /* normal */ } 
04.
  input[type="checkbox"]:hover label { /* normal mouseover */ } 
05.
  input[type="checkbox"]:checked + label { /* ausgewählt */ } 
06.
  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


~Arano
Bitte warten ..
Mitglied: colinardo
LÖSUNG 15.08.2014, aktualisiert 28.08.2014
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
Bitte warten ..
Mitglied: mabue88
28.08.2014 um 10:36 Uhr
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...
Bitte warten ..
Ähnliche Inhalte
Batch & Shell
gelöst Checkbox Event (11)

Frage von Markus2016 zum Thema Batch & Shell ...

Datenbanken
Access Checkbox mit Kombifeld und dann filtern

Frage von atomas42 zum Thema Datenbanken ...

Entwicklung
OTRS Neues Textfeld mit flexiblen Mehrfachauswahl feld (1)

Frage von Schlafwvndler zum Thema Entwicklung ...

Neue Wissensbeiträge
Datenschutz

Autofahrer-Pranger - Bewertungsportal illegal

(8)

Information von BassFishFox zum Thema Datenschutz ...

Windows 10

Neues Win10 Funktionsupdate verbuggt RemoteApp

(2)

Information von thomasreischer zum Thema Windows 10 ...

Microsoft

Die neuen RSAT-Tools für Win10 1709 sind da

(2)

Information von DerWoWusste zum Thema Microsoft ...

Heiß diskutierte Inhalte
Router & Routing
Allnet - VDSL2 Modem - SFP (mini-GBIC) (20)

Frage von Dobby zum Thema Router & Routing ...

Voice over IP
DeutschlandLAN IP Voice Data M Premium, Erfahrung mit Faxgeräte? (17)

Frage von liquidbase zum Thema Voice over IP ...

TK-Netze & Geräte
TK-Anlage VoIP - DECT Erweiterung (16)

Frage von Lynkon zum Thema TK-Netze & Geräte ...