mit php erstellte Elemente Unsichtbar machen

[Vinzenz Mai]

Hallo,

als erstes möchte ich mich für Dein Lob für meinen verlinkten Thread bedanken.

Ok, habs geschafft.

Das ist erfreulich, aber sicherlich bist Du etwas komplizierter vorgegangen als nötig. Dazu später mehr.

Jedoch gibt es die Function unter dem namen getElementsByClass u. getElementsByClassname zum "herunterladen"...

Und darauf soll man ja von alleine kommen ne?!?! .....

hatte ich ja im verlinkten Beitrag verlinkt :-)

Dein Problem ist zwar ähnlich gelagert wie das von mir verlinkte Problem, aber doch etwas anders:

Bei Dir identifiziert jede Checkbox die zugehörige Textbox, die ausgeblendet werden soll. Jeder einzelnen Checkbox entspricht genau eine zugehörige Textbox. Deswegen kannst Du hier problemlos mit id-Werten arbeiten. (Im verlinkten Beitrag gab es zu jedem Namen mehrere Checkboxen, deswegen musste man diese klassifizieren).

Wenn wir von Deinem Codefragment ausgehen:

  <input type="checkbox"  
         name="anwesend[]"  
         onClick="auftauchen()"  
         value="kundenid">  
  <input type="text"  
         value="kundenname"  
         size="5"  
         name="fehlzeit[]">  

so kannst Du bequem jeder Checkbox-Textbox-Kombination passende id-Werte verpassen, z.B. cb4 und tb4 für die vierte Kombination.

Somit hat man eine einfache Vorschrift, wie man von der id der Checkbox zu der id der Textbox kommt: Ersetze im Wert "cb" durch "tb". Das ist das Vorgehen, das ich dort mit "arbeite mit unterschiedlichen Präfixen" gemeint habe.

Somit möchtest Du, wenn die Checkbox mit der id "cb4" angehakt wird, die Textbox mit der id "tb4" einblenden und umgekehrt beim Entfernen des Häkchens die Textbox wieder einblenden. Solches Ein- und Ausblenden findest Du häufig unter dem Suchbegriff "toggle". Verwenden wir also eine Funktion toggle(id), die den Zustand des Elementes mit der übergebenen id umschaltet:

function [link:/archiv/2010/2/t195445/#m1308116@title=toggle](id) {  
    var e = document.getElementById(id)  
    var style = e.style;  
    style.display = style.display != "none" ? "none" : "inline";  
}

Beachte molilys Hinweise zum Inhalt von style.display und baue eine Fehlerbehandlung ein.

Nun können wir das HTML entsprechend anpassen:

  <input type="checkbox"  
         id="cb4"  
         name="anwesend[]"  
         onClick="toggle('tb4')"  
         value="kundenid">  
  <input type="text"  
         id="tb4"  
         value="kundenname"  
         size="5"  
         name="fehlzeit[]">  

Das hartcodierte toggle('tb4') ist natürlich nicht das, was Du willst und wir ersetzen das tb4 durch folgende Konstruktion:

Wir beschaffen uns mit this eine Referenz auf die angeklickte Checkbox, greifen auf dessen id-Eigenschaft zu und ersetzen mit http://de.selfhtml.org/javascript/objekte/string.htm#replace@title=replace das "cb" durch "tb":

  <input type="checkbox"  
         id="cb4"  
         name="anwesend[]"  
         onClick="toggle(this.id.replace(/cb/, 'tb'))"  
         value="kundenid">  
  <input type="text"  
         id="tb4"  
         value="kundenname"  
         size="5"  
         name="fehlzeit[]">  

Das hin- und herschalten zwischen "visible" und "hidden" überlasse ich Dir gern als Übung, falls "display:none" nicht Deiner Vorstellung entspricht.

Freundliche Grüße

Vinzenz