Wildcard möglich bei Befehl getElementByID?

[erawan]

Hallo zusammen

Da ich mich mit Javascript nicht ganz so gut auskenne mal folgende Frage:

Ich habe bei einem Formular Kategorien die mit Checkboxen ausgewählt werden können.
extrem verkürztes Beispiel:
1. Kategorie A
1.1. Kategorie AA
1.2. Kategorie AB
2. Kategorie B

Einzeln natürlich kein Problem. Mein Wunsch wäre jetzt, dass wenn jemand auf die Kategorie A klickt dass alle Checkboxen der Kategorien "darunter" also AA & AB auch markiert sind.

Die Checkboxen kann ich ja über document.getElementById("inputfeldname").checked = true; ansprechen.

Ist es nun möglich das ich je nach übergebenen Namen die entsprechenden Boxen markieren kann? Sprich nach "inputfeldname" eine Wildcard einfügen dass alle Felder angesprochen werden die so anfangen?

zur Erläuterung:
ich übergebe in meine Schleife den Wert "kat1" dann sollen die Boxen kat1, kat11 & kat12 markiert werden.
bei einem übergebenen Wert von kat dann z.b. alle (da ja alle namen so anfangen)

Ich hoffe ich habe meine Frage verständlich erklärt!?

Bitte um Hilfe. Danke.

[Manuel B.]

Ich grüsse den Cosmos,

Ist es nun möglich das ich je nach übergebenen Namen die entsprechenden Boxen markieren kann? Sprich nach "inputfeldname" eine Wildcard einfügen dass alle Felder angesprochen werden die so anfangen?

Nein, das geht nicht. Aber warum machst du es nicht mit name="" und gibst allen, die markiert werden sollen, einfach den gleichen Namen?

Möge das "Self" mit euch sein

[erawan]

Guten Morgen!

Hej wirklich toll dass ihr euch meinem Problem so angenommen habt (hab gestern dann probleme mit dem Internet gehabt deshalb erst jetzt meine Reaktion)

@skeeve
Vielen Dank für dein Beispiel! Werd dieses mal einbauen und schauen ob das meinen Vorstellungen nahe kommt.

Am Abend ist mir dann noch eine Idee gekommen: Da ich die Seite bzw die betreffende Liste ja mit PHP dynamisch aus einer DB zusammenstell - ist es vielleicht eine Lösung wenn ich die betreffenden "Elternelemente" + deren Kindern (z.B. Kat A, Kat AA & Kat AB) in ein Array speicher und wenn ein Elternelemnt markiert wird das javascript mit dem Arraynamen aufrufen und alle Elemente die in diesem Array sind markieren.

(Na ja is jetzt alles sehr theoretisch - wies praktisch funktionieren könnte hab ich keine Ahnung...)

Was meint ihr zu dieser Idee??

Schönen Tag noch

Lg erawan

[Skeeve]

Moin!

Was meint ihr zu dieser Idee??

Sicherlich machbar. Ich halte das aber für redundant. Wenn doch schon auf der Seite alle notwendigen Informationen vorhanden sind, dann kann man sie doch auch nutzen.

Ich muß des öfteren XSLT Dateien für die Arbeit erstellen, die aus XML, HTML und JavaScript generiert. Ich habe mich inzwischen darauf verlegt, möglichst sämtliche Informationen, die das JavaScript benötigt nur aus dem "this" zu ziehen. Es wird immer fehlerträchtiger, je mehr Parameter eine Funktion hat. Damit meine ich: Wenn Du eine Funktion später wieder verwenden willst mußt Du dran denken, alle passenden Parameter mitzugeben.

-- Skeeve

[erawan]

Hallo nochmal Skeeve

Hab grad dein Script eingebaut und ausprobiert -> einfach ein Traum!
Genau das wollte ich.

Hab grad versucht zu verstehen wie genau das Script funktioniert - bin aber leider bis jetzt gescheitert. Javascript ist anscheinend nicht ganz meins.

Noch eine Frage sicherheitshalber: das Script ist unabhängig von vergebenen namen, ids und values der input Felder oder? (Wichtig für mich für die spätere Verwertung in PHP.)

Apropos PHP da kommt jetzt die dynamische Generierung einer superverschachtelten Liste auf mich zu ... aber da weiß ich mir hoffentlich selber zu helfen!?

Lg Erawan

[Skeeve]

Moin!

Hab grad dein Script eingebaut und ausprobiert -> einfach ein Traum!
Genau das wollte ich.

;-) Das freut mich.

Hab grad versucht zu verstehen wie genau das Script funktioniert

  
function markChildren( cb ) { // cb ist die CheckBox auf die geklickt wurde  
  var state= cb.checked; # speichert ob checked oder nicht  
  
  # Jetzt suchen wir das Elternelement der Checkbox. Genauer  
  # Wir suchen einen Vorfahren der ein <LI> ist  
  var prnt= cb; # Dazu fangen wir bei der box selbst an  
  
  # Solange es noch kein <LI> ist  
  while (prnt.nodeName != "LI" ) {  
    # holen wir uns den nächsten Vorfahren  
    # Wir hangeln uns also weiter hoch im Baum  
    prnt= prnt.parentNode;  
  }  
  # Das geht natürlich in die Hose, wenn die Checkbox nicht  
  # in einem <LI> liegt!  
  
  # Wenn wir dann das <LI> gefunden heben, holen wir uns  
  # alle Nachkommen die <INPUT> sind  
  var inputs= prnt.getElementsByTagName('INPUT');  
  
  # Dann arbeiten wir sie alle ab  
  # Anmerkung: Ich mache das gerne von oben nach unten, da nur  
  # ich dann auf 0 vergleichen muß um das Ende zu finden  
  # und die Länge des Arrays nur einmal am Anfang erfragen muß  
  for (var i=inputs.length; i--;) {  
    # wenn das aktuelle <INPUT> eine checkbox ist  
    if ( inputs[i].type == 'checkbox' ) {  
      # wird sie auf den gleichen status gesetzt  
      # wie unsere Ursprungsbox  
      inputs[i].checked= state;  
      # Anmerkung: Die Ursprungsbox wird hier mit erwischet,  
      # schadet aber nichts, da sie ja nur ihren momentanen  
      # Zustand nocheinmal bekommt.  
    }  
  }  
}  

Noch eine Frage sicherheitshalber: das Script ist unabhängig von vergebenen namen, ids und values der input Felder oder? (Wichtig für mich für die spätere Verwertung in PHP.)

vollkommen unabhängig von IDs. Nur abhängig von richtiger Verschachtellung und dem richtigen Element (LI). Wenn Du ein andres (DIV z.B.) nehmen willst, mußt Du das natürlich im Script anpassen.

Values sind auch egal, da ich die garnicht antaste. Es werden nur inputs die type checkbox haben beachtet und da nur die Eigenschaft "checked".

Nochmal zur Klarstellung: Ich habe das nicht auf IE getestet. Bitte selbst probieren, wenn der ein Thema sein sollte, ob das da klappt.
-- Skeeve

[Skeeve]

ARGH!

Da wünscht mann sich ein [Edit]... Sorry! Bin halt ein Perlator und so habe ich # statt // für Kommentare verwendet. Bitte selbst anpassen...

[erawan]

ARGH!

Da wünscht mann sich ein [Edit]... Sorry! Bin halt ein Perlator und so habe ich # statt // für Kommentare verwendet. Bitte selbst anpassen...

Vielen Dank für die Erklärung - schön langsam geht ein siegel nach dem anderen vom großen Buch des Javascripts auf *g*.

Bezügl. LI: da diese Einteilung Sinn macht werde ich sie auch übernehmen wenn auch mit ul statt ol und entsprechend "gestylt" mit CSS und selbstverständlich barrierefrei ausgezeichnet mit label.

Bezügl. Firefox: Auch diese Angelegenheit erledigt sich weitgehend von selber da diese Seite in einem Administrationsbereich benötigt wird und diese wird von denen die zugreifen eh nur mit dem Fuchs geöffnet.
Hab das Ganze aber auch einem Hardcoretest unterzogen und es mit IE unter Apple probiert -> funktioniert (auch wenn man nachdem man das Kästchen angeklickt hat nochmal außerhalb klicken muss aber immerhin)

Bezügl. values etc: Soviel konnte ich aus dem Code schon herauslesen das diese Werte nicht vorkommen, wollte aber nur sichergehen.

Danke auf jeden Fall nochmal und schöne Feiertage!

Lg Erawan

[Skeeve]

Moin!

Bezügl. LI: da diese Einteilung Sinn macht werde ich sie auch übernehmen wenn auch mit ul statt ol und entsprechend "gestylt" mit CSS und selbstverständlich barrierefrei ausgezeichnet mit label.

So hatte ich mir das auch gedacht ;-) Im ersten Moment wollte ich die "Kategorie XX" auch damit versehen. Aber das war fürs Beispiel unwesentlich. D'rum hab ich's gelassen.

Bezügl. Firefox: Auch diese Angelegenheit erledigt sich weitgehend von selber da diese Seite in einem Administrationsbereich benötigt wird und diese wird von denen die zugreifen eh nur mit dem Fuchs geöffnet.

Sehr gut!

Danke auf jeden Fall nochmal und schöne Feiertage!

Dir auch

-- Skeeve

[Skeeve]

Moin!

Ich habe bei einem Formular Kategorien die mit Checkboxen ausgewählt werden können.
extrem verkürztes Beispiel:

1. Kategorie A
   1.1. Kategorie AA
   1.2. Kategorie AB
2. Kategorie B

Wie wäre es, Du strukturierst das ganze? In etwa so:
<ol>
  <li>Kategorie A
    <ol>
      <li>Kategorie AA</li>
      <li>Kategorie AB</li>
    </ol>
  </li>
  <li>Kategorie B</li>
</ol>

Damit ließe sich dann, wenn auf dei Checkbox von Kategorie A geklickt wird, das parent Element finden und von dem ausgehen alle Input elemente (getElementsByTgaName) und die entsprechend dann setzen.

Mal schauen... wenn dir das so nicht reicht, ob ich nachher noch Zeit habe, das mal zu implementieren. Allerdings kann ich das immer nur auf den guten^H^H^H^H^HMozilla Browsern testen ;-)
-- Skeeve-- Skeeve

[Skeeve]

Moin!

Bitteschön...

<html>  
  <head>  
    <title>Modulo einer Zahl</title>  
    <script language="javascript">

  
  
   function markChildren( cb ) {  
    var state= cb.checked;  
    var prnt= cb;  
    while (prnt.nodeName != "LI" ) {  
     prnt= prnt.parentNode;  
    }  
    var inputs= prnt.getElementsByTagName('INPUT');  
    for (var i=inputs.length; i--;) {  
     if ( inputs[i].type == 'checkbox' ) {  
      inputs[i].checked= state;  
     }  
    }  
   }  
  
    

</script>  
  </head>  
  <body>  
    <form name="eingabe" onsubmit="return false">  
   <ol>  
    <li><input type="checkbox" onchange="markChildren(this)"/> Kategorie A  
     <ol>  
      <li><input type="checkbox" onchange="markChildren(this)"/> Kategorie AA</li>  
      <li><input type="checkbox" onchange="markChildren(this)"/> Kategorie AB</li>  
     </ol>  
    </li>  
    <li><input type="checkbox" onchange="markChildren(this)"/> Kategorie B</li>  
   </ol>  
  </form>  
  </body>  
</html>

-- Skeeve

[Mathias Brodala]

Hallo Skeeve.

Bitteschön...

Kleiner Tipp: [code]-Blöcke können verschachtelt werden.

Einen schönen Mittwoch noch.

Gruß, Mathias

[Skeeve]

Moin!

Kleiner Tipp: [code]-Blöcke können verschachtelt werden.

Dankeschön. Braucht's aber nicht, da ich mir das von ein Marko machen lasse.

(Pun intended)

-- Skeeve

[Bio]

Sup!

In der Tat kann zumindest Mozilla teilweise XPath.
Damit solltest Du z.B. alle Elemente selektieren können, die Checkboxen sind und deren Name mit kat anfängt.
Das ist aber mittelschwere bis "deep magic"; da musst Du schon selbst nach googlen und Dich durchschlagen und daran denken, dass es nicht in allen Browsern funktionieren wird. Möge die Macht mit Dir sein.

Gruesse,

Bio