Jquery checkboxen checkall

[Pit]

Frohe Weihnachten,

wie kann ich hier so selektieren, dass nur gruppenweise (also checkAll1 nur t1 und checkAll2 nur t2) die Checkboxen ausgewählt werden?

Pit

[dedlfix]

Tach!

wie kann ich hier so selektieren, dass nur gruppenweise (also checkAll1 nur t1 und checkAll2 nur t2) die Checkboxen ausgewählt werden?

Die Lösung ist zweiteilig. Der erste Schritt wäre, herauszufinden, welche der beiden Checkboxen geklickt wurde. Dazu kann man individuelle Eventhandler registrieren, die die eigentliche Markierfunktion mit einem Parameter aufrufen, der dem Klassennamen entspricht. Diesen Klassennamen kann man dann als Teil zwei beim Selektieren angeben. Eine weitere Möglichkeit ist, ein data-Attribut zu setzen, mit dem Klassennamen als Inhalt und dieses im gemeinsamen Eventhandler auszuwerten. Außerdem kann man noch mit besserem HTML Gruppen bilden, um dann nur die Kinder des gruppierenden Elternelements zu selektieren. Das halte ich auch für die bessere Lösung als mit br zu hantieren. Eine ul, der man Abstände und Aufzählungszeichen entfernt, wäre eine Möglichkeit.

Weiterhin sollten die Label in label-Elementen stehen, damit man auch die Label klicken kann, um die Checkbox umzuschalten. Alternativ das label um das input und dem Label-Text legen.

dedlfix.

[Pit]

Hallo dedlfix,

Diesen Klassennamen kann man dann als Teil zwei beim Selektieren angeben.

Und das genau weiß ich nicht, wie es geht. Kannst Du mir das sagen?

Weiterhin sollten die Label in label-Elementen stehen, damit man auch die Label klicken kann, um die Checkbox umzuschalten. Alternativ das label um das input und dem Label-Text legen.

Danke für den Tip. Schon umgesetzt.

Pit

[dedlfix]

Tach!

Diesen Klassennamen kann man dann als Teil zwei beim Selektieren angeben.

Und das genau weiß ich nicht, wie es geht.

Direkt hinten dran notieren, ohne Leerzeichen input:checkbox.t1.

dedlfix.

[Pit]

Hi,

Direkt hinten dran notieren, ohne Leerzeichen input:checkbox.t1.

Danke. Geht es auch vorne dran? Ich meine, das hätte vorhin auch funktioniert. Wie dem auch sei, ich habe es nun so gelöst.

Danke für Deine Hilfe und weiter frohe Weihnacht

Pit

[dedlfix]

Tach!

Direkt hinten dran notieren, ohne Leerzeichen input:checkbox.t1.

Geht es auch vorne dran?

Nein, weil es dann .t1input:checkbox wäre und man dann nicht mehr Klassenname von Elementname unterschieden kann. In solchen Kombinationen muss der Elementname immer als erstes stehen. (Oder es gibt da noch ein Sonderzeichen, das mir nicht bekannt ist.)

Bitte nicht verwechseln mit .t1 input:checkbox, das wäre eine Checkbox als Kind eines Elements mit dem Klassennamen t1.

dedlfix.

[Pit]

Hi,

Bitte nicht verwechseln mit .t1 input:checkbox, das wäre eine Checkbox als Kind eines Elements mit dem Klassennamen t1.

Ja, ich denke, damit habe ichs verwechselt.

Noch eine Frage:

Im Fiddle funktioniert es ja ganz klasse, aber in meiner Anwendung leider nicht. Grund hierfür ist (oder scheint zu sein), dass meine Checkboxen samt Klassen und IDs in einem nicht sichtbaren formular sind.

Und nach sichtbar machen scheint JS/Jquery diese IDs und Klassen schlicht nicht zu kennen. Jedenfalls wird selbst der kleinste und einfachst programmierte onclick-Event nicht ausgeführt.

Kann das sein? Und was macht man in so einem Fall?

Pit

[Pit]

Hi,

Kann das sein? Und was macht man in so einem Fall?

Schon gefunden, ich muß den JS-Teil natürlich auch zur gleichen Zeit generieren, dann gehts.

Vorher interpretiert JS zwar seinen Code, aber für eine "nicht vorhandene" ID passiert eben auch nichts. Ist die ID dann vorhanden, ist die Code-Interpretation bereits gelaufen. (Jedenfalls stelle ich mir das so vor...man korrigiere mich bitte, wenn ich damit falsch liege).

Gruß, Pit

[dedlfix]

Tach!

Vorher interpretiert JS zwar seinen Code, aber für eine "nicht vorhandene" ID passiert eben auch nichts. Ist die ID dann vorhanden, ist die Code-Interpretation bereits gelaufen.

So ist es. Die Zuweisung erfolgt an die aktuell vorhandenen Elemente.

Im Code sind das dann auch mehrere Schritte, die nacheinander abgearbeitet werden, auch wenn sie verkettet notiert sind. Der erste Schritt selektiert aufgrund des Selektionskriteriums eine Liste von Elementen. Diese Liste geht an den zweiten Schritt. Der zweite Schritt hat keine Ahnung mehr vom Selektionskriterium. Er nimmt nur diese Liste und macht mit den Elementen, was immer er machen soll. Und das war es dann auch mit diesem Code, wenn du ihn nicht erneut aufrufst. Im Hintergrund passiert jedenfalls kein zusätzlicher Schritt, der sich eine Kombination aus den beiden Schritten merkt und auf alle Zeit neu entstehende Elemente, die ins Kreiterium passen würden, mit der Aktion im zweiten Schritt beglückt.

dedlfix.

[Gunnar Bittersmann]

@@Pit

Wie dem auch sei, ich habe es nun so gelöst.

Schade. Warum hast du die von MudGuard erwähnte Gruppierung mit fieldsets nicht umgesetzt?

LLAP 🖖

[Gunnar Bittersmann]

@@dedlfix

Weiterhin sollten die Label in label-Elementen stehen, damit man auch die Label klicken kann, um die Checkbox umzuschalten. Alternativ das label um das input und dem Label-Text legen.

„Damit man auch die Label klicken kann“ ist nur ein Teil der Begründung. Der andere ist: damit die Checkboxen überhaupt eine zugehörige Beschriftung haben. Für etliche Nutzer (die bspw. die Webseite nicht visuell wahrnehmen) wäre das ansonsten nicht der Fall.

LLAP 🖖

[MudGuard]

Hi,

wie kann ich hier so selektieren, dass nur gruppenweise (also checkAll1 nur t1 und checkAll2 nur t2) die Checkboxen ausgewählt werden?

wenn das zwei sets von Checkboxen sind, bietet es sich an, diese in zwei getrennten fieldset-Elementen unterzubringen. Diesen Fieldsets kannst Du jeweils eine id verpassen und darüber die Checkboxen selektieren.

id-Attributwerte müssen eindeutig sein, Du verwendest mehrfach "checkItem". Die eindeutigen id-Attributwerte brauchst Du sowieso, da sonst die label-Elemente den Checkboxen nicht zugeordnet werden können.

cu,
Andreas a/k/a MudGuard

[Pit]

Hi,

id-Attributwerte müssen eindeutig sein, Du verwendest mehrfach "checkItem". Die eindeutigen id-Attributwerte brauchst Du sowieso, da sonst die label-Elemente den Checkboxen nicht zugeordnet werden können.

Oh...peinlich. Ich hatte den html-Teil irgendwoher kopiert und nicht so genau hingeschaut.

Danke für Deine Hilfe und frohe Weihnachten,

Pit

[Matthias Apsel]

Hallo MudGuard,

wenn das zwei sets von Checkboxen sind, bietet es sich an, diese in zwei getrennten fieldset-Elementen unterzubringen. Diesen Fieldsets kannst Du jeweils eine id verpassen und darüber die Checkboxen selektieren.

Richtig. Und es lässt sich auf die Klassen verzichten.

id-Attributwerte müssen eindeutig sein, Du verwendest mehrfach "checkItem".

Stimmt auch.

Die eindeutigen id-Attributwerte brauchst Du sowieso, da sonst die label-Elemente den Checkboxen nicht zugeordnet werden können.

Stimmt nicht.

<label><input></label> trifft auch die richtige Zuordnung.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

<label><input></label> trifft auch die richtige Zuordnung.

Nö, aber <label><input> #text</label>. 😜

Das hat bei Checkboxen und Radiobuttons den Vorteil, dass die per Maus anclickbare Box mit Checkbox/Radiobutton und Beschriftung umschließt.

Bei <input id="id"> <label for="id">#text</label> ist eine Lücke zwischen Checkbox/Radiobutton und Beschriftung, die nicht anclickbar ist. (Anclickbar ist die Lücke schon; es passiert nur nichts.)

Dem könnte man mit CSS zu Leibe rücken: label { margin-left: -2em; padding-left: 2em }. Pragmatischer ist aber die Schachtelung von input in label.

Ich hatte desöfteren dagegen eingeworfen, dass das Eingabefeld nicht Teil seiner Beschriftung ist … Mann kan vielleicht label auch als „Eingabefeld mit Beschriftung“ verstehen – es haben auch andere HTML-Elemente Bezeichnungen, die nicht ihrer (jetzigen) Funktion entsprechen: hr, b, i, …

LLAP 🖖

[dedlfix]

Tach!

Wenn bei

Nö, aber <label><input> #text</label>. 😜

das Leerzeichen Bestandteil des Labels sein kann und darf,

Bei <input id="id"> <label for="id">#text</label> ist eine Lücke zwischen Checkbox/Radiobutton und Beschriftung, die nicht anclickbar ist. (Anclickbar ist die Lücke schon; es passiert nur nichts.)

warum darf dann hier das Leerzeichen nicht mit im Label drinstehen, und das Problem mit der unanklickbaren Lücke ohne weitere Verrenkungen lösen?

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Wenn bei

Nö, aber <label><input> #text</label>. 😜

das Leerzeichen Bestandteil des Labels sein kann und darf,

Bei <input id="id"> <label for="id">#text</label> ist eine Lücke zwischen Checkbox/Radiobutton und Beschriftung, die nicht anclickbar ist. (Anclickbar ist die Lücke schon; es passiert nur nichts.)

warum darf dann hier das Leerzeichen nicht mit im Label drinstehen, und das Problem mit der unanklickbaren Lücke ohne weitere Verrenkungen lösen?

Es darf. Das wäre aber unsinnig. Man würde sich auf die Formatierung des HTML-Quelltextes verlassen – und das ist nie eine gute Idee.

Man muss dann

<input id="id"><label for="id"> #text</label>

im Quelltext schreiben. Später kommt man (oder jemand anderes) auf die Idee, den Quelltext vernünftig zu formatieren und macht daraus

<input id="id">
<label for="id"> #text</label>

Da isse wieder, die Lücke.

Aus <label><input> #text</label> kann man durchaus

<label>
	<input>
	#text
</label>

machen, ohne dass da irgendwas kaputtgeht.

LLAP 🖖

[Gunnar Bittersmann]

@@MudGuard

Diesen Fieldsets kannst Du jeweils eine id verpassen und darüber die Checkboxen selektieren.

Brauchst du gar nicht, das ginge auch über event.target.closest('fieldset').querySelectorAll([type='checkbox']).forEach()

(Und jQuery braucht man dafür auch nicht, deshalb hab ich das gleich mal außenvorgelassen.)

Sinnvoll wäre es freilich, dieses querySelectorAll([type='checkbox']) nicht bei jedem Click auf eine „Check all“-Checkbox auszuführen, sondern einmalig beim Initialisieren der Seite.

LLAP 🖖

[dedlfix]

Tach!

(Und jQuery braucht man dafür auch nicht, deshalb hab ich das gleich mal außenvorgelassen.)

Und du bist derjenige, der das für den Fall des OP entscheidet?

Es ist wesentlich unangenehmer einen Code-Mischmasch aus jQuery und herkömmlichem Javascript zu haben als ein bisschen überflüssiges jQuery. Vor allem dann, wenn man das jQuery aus gewichtigen Gründen verwendet. Beispielsweise, weil man Komponenten von jQueryUI verwendet.

dedlfix.