Hubert Burböck: Auswahlgruppen mit Checkboxen

problematische Seite

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

  1. problematische Seite

    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

    1. problematische Seite

      Hallo MudGuard,

      Willst Du statt Checkboxen Radiobuttons verwenden?

      Nein, es können durchaus mehrere Gruppen angewählt sein.

      Bis demnächst
      Matthias

      --
      Rosen sind rot.
    2. problematische Seite

      Hi, bei Verwendung von Radiobuttons bleiben alle Radiobuttons eingeschaltet und ich habe danach keine Auswhlmöglichkeit mehr.

      MfG Hubert

      1. problematische Seite

        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

        1. problematische Seite

          Hi,

          Hier mein Auschnitt der HTML Selektieren nach Auswahlgruppen mit Checkboxen

          <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

          1. problematische Seite

            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.

            --
            Neu im Forum! Signaturen kann man ausblenden!
            1. problematische Seite

              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

              --
              Rosen sind rot.
              1. problematische Seite

                @@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 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. problematische Seite

                  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

  2. problematische Seite

    Hallo Hubert Burböck,

    du könntest versuchen, das Event von "input" auf "change" zu ändern.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. problematische Seite

      Hallo Matthias,

      "cange" statt "input" funktioniert leider nicht.

      Bis bald Hubert

  3. problematische Seite

    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

    1. problematische Seite

      Hi,

      danke für die Infos. Muss wohl oder übel zuerst etwas JS lernen, dann wird bestimmt alles viel verständlicher werden.

      MfG. Hubert

    2. problematische Seite

      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

      1. problematische Seite

        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

        1. problematische Seite

          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

          --
          Rosen sind rot.
        2. problematische Seite

          @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. problematische Seite

            @@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 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          2. problematische Seite

            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

            1. problematische Seite

              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.

              --
              Neu im Forum! Signaturen kann man ausblenden!
            2. problematische Seite

              @@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> mit size="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 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. problematische Seite

                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> mit size="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

                1. problematische Seite

                  @@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 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. problematische Seite

                    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

  4. problematische Seite

    @@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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  5. problematische Seite

    @@Hubert Burböck

    http://www.lrs-legasthenie.at/MGLtest/lesen_test1.html

    „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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. problematische Seite

      Hi,

      danke, jetz funktionierts auch mit dem IE.

      Mfg.

      Hubert