nicht angemeldet
Checkboxen gruppenweise markieren
Hi,
ich habe ein Script, mit dem ich alle Checkboxen aktivieren kann.
Ich würde aber die Checkboxen gerne gruppieren und über javascript gruppenweise an-oderabklicken können.
Leider bin ich javascript neuling, deshalb tue ich mich damit etwas schwer.
Das Script:
<script type="text/javascript">
function check_all(name, el)
{
if(!el || !el.form) return alert('falscher Parameter');
var box = el.form.elements[name];
if(!box) return alert(name + ' existiert nicht!');
for(var i = 0; i < box.length; i++) box[i].checked = el.checked;
return null;
}
</script>
<form action="#">
<p>
<input type="checkbox" name="loeschen[]"> box 1<br />
<input type="checkbox" name="loeschen[]"> box 2<br />
<input type="checkbox" name="loeschen[]"> box 3<br />
<input type="checkbox" name="loeschen[]"> box 4<br />
<input type="checkbox" name="loeschen[]"> box 5<br />
<input type="checkbox" name="loeschen[]"> box 1a<br />
<input type="checkbox" name="loeschen[]"> box 2a<br />
<input type="checkbox" name="loeschen[]"> box 3a<br />
<input type="checkbox" name="loeschen[]"> box 4a<br />
<input type="checkbox" name="loeschen[]"> box 5a<br />
<p>
<input onclick="check_all('loeschen[]', this)" type="checkbox"> Alle
</form>
Was muß ich tun, um die beiden Checkboxgruppen 1-5 und 1a-5a getrennt voneinander markieren zu können?
Vielen Dank für Eure Unterstützung, Timo
-
Hallo,
ich habe ein Script, mit dem ich alle Checkboxen aktivieren kann.
Ich würde aber die Checkboxen gerne gruppieren und über javascript gruppenweise an-oderabklicken können.<form action="#">
<p>
<input type="checkbox" name="loeschen[]"> box 1<br />
<input type="checkbox" name="loeschen[]"> box 2<br />
<input type="checkbox" name="loeschen[]"> box 3<br />
<input type="checkbox" name="loeschen[]"> box 4<br />
<input type="checkbox" name="loeschen[]"> box 5<br /><input type="checkbox" name="loeschen[]"> box 1a<br />
<input type="checkbox" name="loeschen[]"> box 2a<br />
<input type="checkbox" name="loeschen[]"> box 3a<br />
<input type="checkbox" name="loeschen[]"> box 4a<br />
<input type="checkbox" name="loeschen[]"> box 5a<br /><p>
Was muß ich tun, um die beiden Checkboxgruppen 1-5 und 1a-5a getrennt voneinander markieren zu können?
die beiden Gruppen jeweils in ein <http://de.selfhtml.org/html/formulare/strukturieren.htm#gruppieren@title=sinnvolles gruppierendes Element> packen, damit Du beide Gruppen getrennt voneinander ansprechen kannst.
Freundliche Grüße
Vinzenz
-
die beiden Gruppen jeweils in ein <http://de.selfhtml.org/html/formulare/strukturieren.htm#gruppieren@title=sinnvolles gruppierendes Element> packen, damit Du beide Gruppen getrennt voneinander ansprechen kannst.
Ich glaube, Du hast mich falsch verstanden. Es sind Checkboxen, die in einer Tabelle vorliegen. Jede eile hat eine Checkbox.
Ich würde gerne den Gruppen eine GruppenID verpassen. Also Checkbox 1-5 bekommen ID='1' und 1a-5a bekommen ID='2'
Und dann würde ich gerne über einen Eventhandler, den ich einem Link aus der Gruppe anhänge, die Checkboixen mit der ID 5 aktivieren.
Schöne Grüße, Timo
-
Hallo,
die beiden Gruppen jeweils in ein <http://de.selfhtml.org/html/formulare/strukturieren.htm#gruppieren@title=sinnvolles gruppierendes Element> packen, damit Du beide Gruppen getrennt voneinander ansprechen kannst.
Ich glaube, Du hast mich falsch verstanden. Es sind Checkboxen, die in einer Tabelle vorliegen. Jede eile hat eine Checkbox.
dann poste den richtigen Quellcode und nicht verstümmelten Quellcode, ich zitiere Deinen Ausgangsbeitrag:
<p>
<input type="checkbox" name="loeschen[]"> box 1<br />
<input type="checkbox" name="loeschen[]"> box 2<br />
<input type="checkbox" name="loeschen[]"> box 3<br />
<input type="checkbox" name="loeschen[]"> box 4<br />
<input type="checkbox" name="loeschen[]"> box 5<br /><input type="checkbox" name="loeschen[]"> box 1a<br />
<input type="checkbox" name="loeschen[]"> box 2a<br />
<input type="checkbox" name="loeschen[]"> box 3a<br />
<input type="checkbox" name="loeschen[]"> box 4a<br />
<input type="checkbox" name="loeschen[]"> box 5a<br /><p>
Wo ist da eine Tabelle? Wie kann ich Dich missverstanden haben?
Wenn Du eine Tabelle hast, dann nutze das entsprechende <http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss@title=gruppierende Element für Tabellendatenbereiche>.Ich würde gerne den Gruppen eine GruppenID verpassen. Also Checkbox 1-5 bekommen ID='1' und 1a-5a bekommen ID='2'
1 und 2 sind <http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name@title=keine gültigen Werte> für das id-Attribut.
Freundliche Grüße
Vinzenz
-
-
-
Hallo Timo,
ich fasse die bisherigen Erkenntnisse aus diesem und dem gesperrten Thread zum gleichen Thema zusammen. Ich hoffe, dass wir somit zu einem Ergebnis kommen werden.
Du erzeugst mittels PHP (siehe Dein vierter Beitrag) ein Formular, dessen Elemente in tabellarischer Form vorliegen (siehe Dein zweiter Beitrag) - augenscheinlich als Ergebnis einer Datenbankabfrage (4. Beitrag, PHP-Code) - und je Tabellenzeile mindestens eine Spalte mit einem Namen (siehe Dein dritter Beitrag) und eine Spalte mit einer Checkbox enthält (zweiter Beitrag). Da Du die Daten serverseitig verarbeiten willst und daher alle Checkboxen den gleichen Namen tragen, kannst Du nicht über getElementsByName() auf die Checkboxen zugreifen. Da die Werte des id-Attributs dokumentweit eindeutig sein müssen, kannst Du erst recht nicht getElementById() verwenden.
Die Ausgabe ist nach der Zeit und nicht nach dem Namen sortiert (3. Beitrag), deswegen kann man die Datensätze einer _Gruppe_ nicht so einfach über ein einziges gemeinsames Elternelement finden, weil das gemeinsame Elternelement, in dem alle *Namen* und *Checkboxen* liegen, die Gesamttabelle ist - und somit auch alle anderen _Gruppen_ enthält. Somit scheitert mein einfacher Ansatz aus meinem zweiten Beitrag, der ausgehend von Deinem ersten Beitrag immer noch davon ausging, dass zusammengehörende Checkboxen in einem gemeinsamen gruppierenden Element liegen. Dein zweiter Beitrag zeigte außerdem auf, dass die erfrischend simple Methode aus meinem ersten Beitrag, die perfekt zum gezeigten Code passte, keine Lösung für Dein (unzureichend beschriebenes) Problem war.
Außerdem ist zu berücksichtigen, dass Du aufgrund eines Klicks auf ein Element in der Spalte "Name" auf Elemente in der Spalte "Checkboxen" zugreifen willst (3. Beitrag von Dir). Dies ist eine wesentliche Erweiterung zu Deinen ersten beiden Beiträgen, die jeweils *genau ein* Element zum Aktivieren/Deaktivieren der Checkboxen einer Gruppe suggerierten.
Ich hätte jetzt folgende Idee:
Ganz bestimmt gibt es zu jedem Namen eine entsprechende ID in Deiner Datenbank, die Du mit abfragen kannst. Ich hoffe, es handelt sich um eine ganze Zahl. Diese ganze Zahl, versehen mit zwei unterschiedlichen Präfixen könntest Du nutzen, um sowohl Namen als auch Checkboxen zu *klassifizieren*.
Aus der Klasse des angeklickten Namens ergibt sich somit der Klassenname der anzuhakenden Checkboxen.Zum Beispiel kannst Du über die Knotenliste der Checkboxen Deines Formulars laufen und falls der Knoten die richtige Klasse aufweist, dann wird sie angehakt (Aschenputtelmethode). Alternativ könntest Du auch Schwergewichte wie getElementsByClassName() anwenden.
Abschlussbemerkung:
Mein Lösungsvorschlag geht davon aus, dass weder das anzuklickende Element noch die Checkbox eine spezielle Formatierung per CSS benötigen, die über das class-Attribut vorgenommen werden muss.Bessere Vorschläge werden gerne dankend entgegengenommen.
Freundliche Grüße
Vinzenz
-
Hallo Timo,
ich fasse die bisherigen Erkenntnisse aus diesem und dem gesperrten Thread zum gleichen Thema zusammen. Ich hoffe, dass wir somit zu einem Ergebnis kommen werden.
Hut ab, dass Du Dir die Mühe gemacht hast! Und soweit ich das überblicke, hast Du beim Zusammenfassen die Dinge korrekt sortiert.
Außerdem ist zu berücksichtigen, dass Du aufgrund eines Klicks auf ein Element in der Spalte "Name" auf Elemente in der Spalte "Checkboxen" zugreifen willst (3. Beitrag von Dir). Dies ist eine wesentliche Erweiterung zu Deinen ersten beiden Beiträgen, die jeweils *genau ein* Element zum Aktivieren/Deaktivieren der Checkboxen einer Gruppe suggerierten.
Ich bin ein echter Noob in Javascript, ich hätte nicht gedacht, dass es einen Unterschied macht. Man kann doch ebventhandler auch an einen Link anhängen?
Ich hätte jetzt folgende Idee:
Ganz bestimmt gibt es zu jedem Namen eine entsprechende ID in Deiner Datenbank, die Du mit abfragen kannst. Ich hoffe, es handelt sich um eine ganze Zahl.Ja. Handelt es sich.
Diese ganze Zahl, versehen mit zwei unterschiedlichen Präfixen könntest Du nutzen, um sowohl Namen als auch Checkboxen zu *klassifizieren*.
Aus der Klasse des angeklickten Namens ergibt sich somit der Klassenname der anzuhakenden Checkboxen.Was meinst Du genau mit Checkbox klassifizieren? So richtig class='abc'? Warum ich 2 Präfixe brauche, versteh ich auch nicht. Aber das liegt wohl daran, dass ich das Problem "wesentliche Erweiterung" (s.o.) nicht raffe. Ich sag ja, Noob.
Mein Lösungsvorschlag geht davon aus, dass weder das anzuklickende Element noch die Checkbox eine spezielle Formatierung per CSS benötigen, die über das class-Attribut vorgenommen werden muss.
Ja, das ist auch so.
Danke für das Wiederaufgreifen des Threads, ich hatte schon resigniert und wäre vermutlich nichnt mehr eingestiegen. Freu mich aber, das es weitergeht.Gruß, Timo
-
Hallo,
ich fasse die bisherigen Erkenntnisse aus diesem und dem gesperrten Thread zum gleichen Thema zusammen. Ich hoffe, dass wir somit zu einem Ergebnis kommen werden.
Hut ab, dass Du Dir die Mühe gemacht hast! Und soweit ich das überblicke, hast Du beim Zusammenfassen die Dinge korrekt sortiert.
ein guter Ausgangspunkt.
Außerdem ist zu berücksichtigen, dass Du aufgrund eines Klicks auf ein Element in der Spalte "Name" auf Elemente in der Spalte "Checkboxen" zugreifen willst (3. Beitrag von Dir). Dies ist eine wesentliche Erweiterung zu Deinen ersten beiden Beiträgen, die jeweils *genau ein* Element zum Aktivieren/Deaktivieren der Checkboxen einer Gruppe suggerierten.
Ich bin ein echter Noob in Javascript,
das war jeder einmal. Das ist keine Schande. Du bist jedoch der einzige, der für Dich diesen Zustand ändern kann.
ich hätte nicht gedacht, dass es einen Unterschied macht. Man kann doch ebventhandler auch an einen Link anhängen?
klar kann man das. Es ist jedoch ein Unterschied, ob in der gleichen Zeile etwas zu tun ist, oder ob unterhalb der Tabelle diese gesammelte Funktionalität in einer Liste zu implementieren ist. So wie es ist, ist es einfacher :-)
Ganz bestimmt gibt es zu jedem Namen eine entsprechende ID in Deiner Datenbank, die Du mit abfragen kannst.[...] Diese ganze Zahl, versehen mit zwei unterschiedlichen Präfixen könntest Du nutzen, um sowohl Namen als auch Checkboxen zu *klassifizieren*. Aus der Klasse des angeklickten Namens ergibt sich somit der Klassenname der anzuhakenden Checkboxen.
Was meinst Du genau mit Checkbox klassifizieren? So richtig class='abc'?
genau das. Deswegen verwendete ich den Begriff "klassifizieren" statt "gruppieren". "klassifizieren" passt auf das Problem, somit ist es sinnvoll, Klassen zu verwenden - und kein Missbrauch von Klassen :-)
Warum ich 2 Präfixe brauche, versteh ich auch nicht.
Du brauchst keine zwei Präfixe. Unterschiedliche Präfixe sind sinnvoll, wenn man getElementByClassName() - oder Frameworks mit Selektorengines - verwendet, weil man darüber genau die Liste der gewünschten Checkboxen bekommt.
Man kann doch ebventhandler auch an einen Link anhängen?
Klar kann man das. Aber Du benötigst keinen Link, um einen onclick-Event zu bekommen.
Gehen wir von folgendem HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Checkboxen aktivieren</title> </head> <body> <h1>Mailliste</h1> <form action="" name="mailliste"> <table> <tr> <th>Absender</th> <th>Aktion</th> </tr> <tr> <td>Max Mustermann</td> <td><input type="checkbox" name="arr_mail[]" value="irgendwas"></td> </tr> <tr> <td>Michaela Musterfrau</td> <td><input type="checkbox" name="arr_mail[]" value="anderes"></td> </tr> <tr> <td>Max Mustermann</td> <td><input type="checkbox" name="arr_mail[]" value="irgendwas"></td> </tr> </table> </form> </body> </html>und den dazugehörigen Daten
id | Absender
-----------------------------
17 | Max Mustermann
24 | Michaela Musterfrauaus, so können wir die von Dir gewünschte Funktionalität (wie von mir beschrieben, reduziert auf ein Präfix "p") so erzielen:
1. Die td-Elementen der Namensspalte
- erhalten die Klasse <präfix><id>
- bekommen einen onclick-Handler
- ein title-Attribut, dass den Benutzer über die erweiterte Funktionalität
informiert
2. Die Checkboxen erhalten die Klasse <präfix><id><tr> <td class="p17" onclick="checkAll([ref:self812;javascript/sprache/objekte.htm#this@title=this])" title="Anklicken markiert alle Mails dieses Absenders">Max Mustermann</td> <td><input type="checkbox" name="arr_mail[]" value="irgendwas" class="p17"></td> </tr>3. Schreiben der Handlerfunktion
Es gibt verschiedene Wege, die betreffenden Checkboxen herauszufinden,
zum Beispiel:a) die zu aktivierenden Checkboxen sind in der Liste der Checkboxen
mit dem Namen arr_mail[] enthalten. Diese Liste erhalten wir mit
http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name@title=getElementsByName(). Weiter verfügen diese Elemente über die gleiche
Klasse wie das angeklickte Element. Auf die Klasse können wir mit
der Eigenschaft http://de.selfhtml.org/javascript/objekte/all.htm#class_name@title=className zugreifen.
b) Iterieren über sämtliche Formularelemente des Formulars, siehe
SELFHTML, Objekt http://de.selfhtml.org/javascript/objekte/elements.htm@title=elements. Es sind die Elemente vom Typ checkbox
(Eigenschaft http://de.selfhtml.org/javascript/objekte/elements.htm#type@title=type) mit der gleichen Klasse wie das angeklickte
Element von Interesse (wie in a) className).
c) Bei unterschiedlichen Präfixen bei Absender und Checkbox:
Ermittle aus Absenderklasse die relevante Checkboxenklasse.
Ermittle die gewünschten Knoten mit getElementsByClassName.So könnte man a) umsetzen:
/** * Aktiviert die Checkbox bei allen Mails des gleichen Absenders * <b>checkAll</b> * * @param el {object} Objekt (td-Element), das angeklickt wurde */ function checkAll(el) { // Ermittle die Liste der Checkboxen mit dem gewünschten Namen var allCheckBoxes = document.[ref:self812;javascript/objekte/document.htm#get_elements_by_name@title=getElementsByName]("arr_mail[]"); // Durchlaufe diese Liste for (var i = 0; i < allCheckBoxes.[ref:self812;javascript/objekte/array.htm#length@title=length]; i++) { // und prüfe ob die aktuelle Checkbox die richtige Klasse aufweist if (allCheckBoxes[i].[ref:self812;javascript/objekte/all.htm#class_name@title=className] == el.className) { allCheckBoxes[i].[ref:self812;javascript/objekte/elements.htm#checked@title=checked] = true; } } }Freundliche Grüße
Vinzenz
PS: Die Verlinkung von className verursachte leichte Bauchschmerzen :-(
document.all.className dürfte nur für IE4 erforderlich sein - und der ist mausetot.-
Hallo,
das war jeder einmal. Das ist keine Schande. Du bist jedoch der einzige, der für Dich diesen Zustand ändern kann.
Der Einzige stimmt so nicht ganz, aber egal :-)
genau das. Deswegen verwendete ich den Begriff "klassifizieren" statt "gruppieren". "klassifizieren" passt auf das Problem, somit ist es sinnvoll, Klassen zu verwenden - und kein Missbrauch von Klassen :-)
Ich wußte gar nicht, da? das erlaubt ist.
Man kann doch ebventhandler auch an einen Link anhängen?
Klar kann man das. Aber Du benötigst keinen Link, um einen onclick-Event zu bekommen.
Das wußte ich. Aber ein anklickbarer Name macht dem User klar, dass da eventuell eine Funktionalität hinter steckt.
PS: Die Verlinkung von className verursachte leichte Bauchschmerzen :-(
document.all.className dürfte nur für IE4 erforderlich sein - und der ist mausetot.Was willst Du mir damit sagen? Ich frage, weil ich ausschließen kann, dass ein IE4 dieses Script je zu Gesicht bekommt.
Ich habe das Script noch ein wenig für mich umgearbeitet, also es auf Links umgebaut und eine Ent-Check Funktion eingebaut.
Funktioniert prächtigst und das Beste ist, ich habe auch verstanden, wie das Teil funktioniert.
Herzlichen Dank fürs Helfen!
Timo
-
Funktioniert prächtigst und das Beste ist, ich habe auch verstanden, wie das Teil funktioniert.
...was ich sicher ohne Deine Links im Code nicht geschafft hätte.
Herzlichen Dank fürs Helfen!
Und deshalb schnell nachgereicht noch ein Sonderdankeschön für das Verlinken innerhalb des Codes, das mit das Verstehen durch Nachlesen so einfach gemacht hat.
Gruß, Timo
-
-
-
-