nicht angemeldet
MudGuard
Matthias Apsel
MudGuard
Matthias Apsel
MudGuard
Gunnar Bittersmann
Gunnar Bittersmann
Hallo!
Ich sitze schon einige Zeit vor einem kleinen Problem und finde keine Lösung. http://www.lrs-legasthenie.at/MGLtest/lesen_test1.html Auf einer Webseite befinden sich mehrere PDF's. Diese werden in Gruppen mit Checkboxen selektiert. Das alles funktioniert auch einwandfrei.
Das kleine Problem ist, dass die Checkboxen beim ersten Klick angehakt werden und bei nochmaligem Klick wird der Haken wieder entfernt.
Es ist also verwirrend, weil immer die zuletzt angeklickte Checkbox wirksam ist, egal ob angehakt oder nicht angehakt.
Mein Wunsch wäre, dass nur jene Checkbox einen Haken hat, welche auch wirksam ist. Alle übrigen sollen keinen Haken haben.
Meine JS-Kenntnisse sind so ca.0,0.
Vielleicht gibt es jemanden unter euch, der das Problem schon einmal hatte und mir die Lösung zeigen kann.
Mit freundlichen Grüßen Hubert
Hi,
Es ist also verwirrend, weil immer die zuletzt angeklickte Checkbox wirksam ist, egal ob angehakt oder nicht angehakt.
Was meinst Du mit "wirksam"?
Mein Wunsch wäre, dass nur jene Checkbox einen Haken hat, welche auch wirksam ist. Alle übrigen sollen keinen Haken haben.
Willst Du statt Checkboxen Radiobuttons verwenden?
cu,
Andreas a/k/a MudGuard
Hallo MudGuard,
Willst Du statt Checkboxen Radiobuttons verwenden?
Nein, es können durchaus mehrere Gruppen angewählt sein.
Bis demnächst
Matthias
Hi, bei Verwendung von Radiobuttons bleiben alle Radiobuttons eingeschaltet und ich habe danach keine Auswhlmöglichkeit mehr.
MfG Hubert
Hi,
bei Verwendung von Radiobuttons bleiben alle Radiobuttons eingeschaltet und ich habe danach keine Auswhlmöglichkeit mehr.
Dann verwendest Du die Radios nicht richtig. Alle zusammengehörigen Radiobuttons müssen denselben Namen haben.
cu,
Andreas a/k/a MudGuard
Hi,
Hier mein Auschnitt der HTML Selektieren nach Auswahlgruppen mit Checkboxen
Tabellenkalk
marctrix<br/><p>
<label> <input id="filter1" type="radio" value="Tiere"> Tiere</label>
<label> <input id="filter2" type="radio" value="Natur" > Natur</label>
<label> <input id="filter3" type="radio" value="Spiele" > Spiele</label>
<label> <input id="filter4" type="radio" value="" > Alle anzeigen</label>
</p>
Was ist da mit "selber Name" gemeint?
Hubert
hallo
Selektieren nach Auswahlgruppen mit Checkboxen
Das sind radio inputs
<br/><p> <label> <input id="filter1" type="radio" value="Tiere"> Tiere</label> <label> <input id="filter2" type="radio" value="Natur" > Natur</label> <label> <input id="filter3" type="radio" value="Spiele" > Spiele</label> <label> <input id="filter4" type="radio" value="" > Alle anzeigen</label> </p>
Was ist da mit "selber Name" gemeint?
Damit radio-inputs als Gruppe erkannt werden, müssen sie jedes ein Name Attribut mit identischem Value haben.
Hallo beatovich,
Damit radio-inputs als Gruppe erkannt werden, müssen sie jedes ein Name Attribut mit identischem Value haben.
Sie sollen aber nicht wie radio-buttons verwendet werden. Es kann durchaus gewünscht sein, Elemente der Kategorien Tiere und Natur anzuzeigen.
Bis demnächst
Matthias
@@Matthias Apsel
Sie sollen aber nicht wie radio-buttons verwendet werden. Es kann durchaus gewünscht sein, Elemente der Kategorien Tiere und Natur anzuzeigen.
Nein, nicht in diesem Fall: „Mein Wunsch wäre, dass nur jene Checkbox einen Haken hat, welche auch wirksam ist. Alle übrigen sollen keinen Haken haben.“ Also keine Checkboxen.
Und wenn doch mehrere Kategorien auswählbar sein sollten, wäre zu klären (und dem Nutzer verständlich zu machen!), ob diese verundet oder verodert werden. Was soll von ♣︎A, ♣︎K, ♡A, ♡D, ♠︎10 bei Auswahl von ♣︎ und A angezeigt werden: ♣︎A, ♣︎K, ♡A oder nur ♣︎A?
LLAP 🖖
Hallo,
Was soll von ♣︎A, ♣︎K, ♡A, ♡D, ♠︎10 bei Auswahl von ♣︎ und A angezeigt werden: ♣︎A, ♣︎K, ♡A oder nur ♣︎A?
Das macht man dann abhängig von einer Und/Oder-Checkbox…
Gruß
Kalk
Hallo Hubert Burböck,
du könntest versuchen, das Event von "input" auf "change" zu ändern.
Bis demnächst
Matthias
Hallo Matthias,
"cange" statt "input" funktioniert leider nicht.
Bis bald Hubert
Hi,
Ich sitze schon einige Zeit vor einem kleinen Problem und finde keine Lösung. http://www.lrs-legasthenie.at/MGLtest/lesen_test1.html Auf einer Webseite befinden sich mehrere PDF's. Diese werden in Gruppen mit Checkboxen selektiert. Das alles funktioniert auch einwandfrei.
Das kleine Problem ist, dass die Checkboxen beim ersten Klick angehakt werden und bei nochmaligem Klick wird der Haken wieder entfernt.
Es ist also verwirrend, weil immer die zuletzt angeklickte Checkbox wirksam ist, egal ob angehakt oder nicht angehakt.
Du wertest die checked-Eigenschaft der Checkboxen ja auch nicht aus. Wieso erwartest Du dann, daß der Anhakel-Zustand einen Einfluß auf das Ergebnis hat?
cu,
Andreas a/k/a MudGuard
Hi,
danke für die Infos. Muss wohl oder übel zuerst etwas JS lernen, dann wird bestimmt alles viel verständlicher werden.
MfG. Hubert
Hallo alle zusammen!
Danke für eure Infos.
Nun habe ich die passende Lösung gefunden. Statt der Checkboxen habe jetzt:
<p>Selektieren nach Auswahlgruppen</p>
<select id="filter">
<option value="Tiere" />Tiere
<option value="Natur" />Natur
<option value="Spiele" />Spiele
<option value="" />Alle
</select>
<br/>
Ich finde, das ist eine gute Lösung des Problems.
Danke nochmals für eure Mithilfe
Mit freundlichen Grüßen
Hubert
Hej Hubert,
Nun habe ich die passende Lösung gefunden. Statt der Checkboxen habe jetzt:
<p>Selektieren nach Auswahlgruppen</p> <select id="filter"> <option value="Tiere" />Tiere <option value="Natur" />Natur <option value="Spiele" />Spiele <option value="" />Alle </select> <br/>
Ich finde, das ist eine gute Lösung des Problems.
Jetzt fehlt das label… 😉
Übrigens: Mit dem Attribut "multiple" können auch mehrere Einträge ausgewählt werden.
Und mit size="4" kannst du dafür sorgen, dass alle Optionen auch zu sehen sind.
Marc
Hallo marctrix,
Übrigens: Mit dem Attribut "multiple" können auch mehrere Einträge ausgewählt werden.
Die Bedienung ist allerdings nicht so der Burner.
Bis demnächst
Matthias
@@marctrix
Übrigens: Mit dem Attribut "multiple" können auch mehrere Einträge ausgewählt werden.
Nein, können nicht. Dass Nutzer theoretisch die Möglichkeit hätten, heißt bei weitem nicht, dass sie es praktisch auch tun können.
<select multiple> ist (bis auf spezielle Anwendungen für sehr spezielle Zielgruppen) ein schwerer Designfehler.
LLAP 🖖
@@Gunnar Bittersmann
Dass Nutzer theoretisch die Möglichkeit hätten, heißt bei weitem nicht, dass sie es praktisch auch tun können.
s.a. Mehrfachauswahl
<select multiple>ist (bis auf spezielle Anwendungen für sehr spezielle Zielgruppen) ein schwerer Designfehler.
fürs Stylesheet:
select[multiple]
{
outline: 0.5rem solid red !important;
ERROR: 'unusable UI element';
}
LLAP 🖖
Hej Gunnar,
@@marctrix
Übrigens: Mit dem Attribut "multiple" können auch mehrere Einträge ausgewählt werden.
Nein, können nicht. Dass Nutzer theoretisch die Möglichkeit hätten, heißt bei weitem nicht, dass sie es praktisch auch tun können.
<select multiple>ist (bis auf spezielle Anwendungen für sehr spezielle Zielgruppen) ein schwerer Designfehler.
Als Anwender liebe ich <select>, als Entwickler würde ich immer darauf achten, dass <select multiple> mit size="4" kombiniert wird (oder wie viele Optionen auch immer bereit gestellt werden).
Einige aktuelle Browser machen das standardmäßig, weil es sich offenbar herumgesprochen hat, dass es problematisch ist, wenn ausgewählte Elemente nicht mehr sichtbar sind.
Tatsächlich komme ich in meinen Webseiten aber auch am liebsten (und fast immer) ohne select-Boxen aus.
Marc
hallo
Tatsächlich komme ich in meinen Webseiten aber auch am liebsten (und fast immer) ohne
select-Boxen aus.
hmm, ja könnte sein.
Wenn es zu viele Optionen gibt, ist man mit input type=search und datalist besser bedient. Wenn es aber wenige Optionen sind, ist man mit radio bzw checkboxen ebenso gut bedient.
@@marctrix
Als Anwender liebe ich
<select>
Was du als Anwender liebst, ist für andere Anwender irrelevant.
als Entwickler würde ich immer darauf achten, dass
<select multiple>mitsize="4"kombiniert wird (oder wie viele Optionen auch immer bereit gestellt werden).
Damit ist immmer noch nicht erkennbar, dass mehrere Optionen gewählt werden können, und schon gar nicht, wie.
LLAP 🖖
Hej Gunnar,
Als Anwender liebe ich
<select>Was du als Anwender liebst, ist für andere Anwender irrelevant.
Wo hätte ich denn jemals etwas anderes behauptet?
Selbst wenn ich der durchschnittliche Anwender wäre, wäre ich mir meiner Einzigartigkeit bewusst und würde niemals für mich selber entwickeln!
als Entwickler würde ich immer darauf achten, dass
<select multiple>mitsize="4"kombiniert wird (oder wie viele Optionen auch immer bereit gestellt werden).Damit ist immmer noch nicht erkennbar, dass mehrere Optionen gewählt werden können, und schon gar nicht, wie.
Ich habe ja viel mit internen Anwendungen zu tun. Die Anwender, die mir meist persönlich bekannt sind, fordern oft bestimmte Bedienelemente ein und wissen auch, wie die funktionieren…
Ich kann mich nicht mehr daran erinnern wann oder ob überhaupt ich einmal ein multiple select auf einer öffentlichen Website benutzt habe. Übrigens: woher wissen Anwender, dass mehrere Checkboxen auswählbar sind? — Ich kann mich damit zwar nicht immer durchsetzen, schreibe aber in meine Anwendungsbeispiele immer (wenn ich dran denke) dran, dass mehrere Möglichkeiten auswählbar sind…
Marc
@@marctrix
Ich habe ja viel mit internen Anwendungen zu tun. Die Anwender, die mir meist persönlich bekannt sind, fordern oft bestimmte Bedienelemente ein und wissen auch, wie die funktionieren…
Den Fall hatte ich mit „spezielle Anwendungen für sehr spezielle Zielgruppen“ abgefackelt.
Ich kann mich nicht mehr daran erinnern wann oder ob überhaupt ich einmal ein multiple select auf einer öffentlichen Website benutzt habe.
Gut so – wenn der Grund ist, dass du es nicht oder vor langer Zeit getan hattest, und nicht, dass du es kürzlich getan hast, aber ein schlechtes Gedächtnis hast. 😉
Übrigens: woher wissen Anwender, dass mehrere Checkboxen auswählbar sind?
Das haben sie gelernt. Eckig: Checkboxen, Mehrfachauswahl möglich. Rund: Radiobuttons, Auswahl genau einer der Optionen.
Und sollte ein Nutzer das tatsächlich noch nicht wissen, findet sie es ja bei der Benutzung heraus. Bei Checkboxen ändern sich bei der Bedienung einer Checkbox die anderen nicht. Bei Radiobuttons ist jeweils nur einer der Gruppe ausgewählt.
Dieses Herausfinden bei der Bedienung ist bei <select multiple> nicht möglich. Deshalb das als UI-Element vermeiden! (Ausnahme s.o.)
LLAP 🖖
Hej Gunnar,
Ich habe ja viel mit internen Anwendungen zu tun. Die Anwender, die mir meist persönlich bekannt sind, fordern oft bestimmte Bedienelemente ein und wissen auch, wie die funktionieren…
Den Fall hatte ich mit „spezielle Anwendungen für sehr spezielle Zielgruppen“ abgefackelt.
Oh ja, da war etwas vier Posts zurück in Klammern in einen Nebensatz eingeschoben. 😉
Übrigens: woher wissen Anwender, dass mehrere Checkboxen auswählbar sind?
Das haben sie gelernt. Eckig: Checkboxen, Mehrfachauswahl möglich. Rund: Radiobuttons, Auswahl genau einer der Optionen.
Wenn man sich darauf verlassen könnte…
Dieses Herausfinden bei der Bedienung ist bei
<select multiple>nicht möglich. Deshalb das als UI-Element vermeiden! (Ausnahme s.o.)
Ich habe dir auch nirgends widersprochen (glaube ich). 😉
Marc
@@Hubert Burböck
Mein Wunsch wäre, dass nur jene Checkbox einen Haken hat, welche auch wirksam ist. Alle übrigen sollen keinen Haken haben.
Checkboxen (eckig) dienen dazu, Optionen unabhängig voneinander auswählen zu können (Mehrfachauswahl möglich).
Radiobuttons (rund) dienen dazu, genau eine aus mehreren Optionen auszuwählen.
Die fälschliche Verwendung von Checkboxen für die Auswahl genau einer aus mehreren Optionen ist ein Designfehler.
Ebenso wäre es ein Designfehler, Checkboxen rund darzustellen oder Radiobuttons eckig. Die Zuordnung ist gelernt – und besteht schon seit Zeiten vor grafischen Nutzerinterfaces: [ ] [x] vs. ( ) (.)
LLAP 🖖
@@Hubert Burböck
„MS-IE 10 und IE 11 kann mit den style-Funktionen "grid" nichts anfangen.“
Das ist so nicht richtig. Selbstverständlich können IE 10 und 11 Grid; schließlich stammt Grid ja ursprünglich von Microsoft.
Was IE 10 und 11 nicht können: automatische Anordnung der Elemente im Grid.
„Es werden daher alle Bilder untereinander angeordnet.“
Warum? Es ist ein leichtes, einen Fallback mit Floats zur Verfügung zu stellen, wenn die Items dieselbe Höhe haben:
#themen::after /* clearfix */
{
display: block;
clear: both;
content: '';
}
#themen li
{
width: 10em;
float: left;
}
@supports (display: grid)
{
#themen
{
display: grid;
grid-template-columns: repeat(auto-fill,minmax(10em, 1fr));
}
#themen::after
{
content: none;
}
#themen li
{
width: auto;
}
}
Ich hab hier #themen in den Selektoren verwendet, damit das nicht auf andere möglicherweise vorhandene Listen wirkt.
Und ist das wirklich eine geordnete Liste ol, wo es auf die Reihenfolge ankommt? Oder ist es eine ungeordnete Liste, sollte also in HTML ul sein?
LLAP 🖖
Hi,
danke, jetz funktionierts auch mit dem IE.
Mfg.
Hubert