Textarea mit einer Checkbox ausblenden

[Gunnar Bittersmann]

@@inspiron:

nuqneH

ich möchte mit einer checkbox mehrere Textarea in einem Formular ausblenden.
Kann mir bitte jemand ein Tip geben wie ich das lösen kann

Mit HTML gar nicht, da HTML die (statische) Struktur einer Webseite beschreibt.

Mit CSS (allein) auch nicht, da die Textareas nicht Nachfahren der Checkbox sind und man per CSS nicht im DOM aufwärts hangeln kann.

Bleibt also nur JavaScript: Wenn der Status der Checkbox geändert wird (Event 'change'), wird bei einem übergeordneten Element ('form' bietet sich an) die Klasse geändert. Ausgebelendet wird per Nachfahrenselektor. Wenn nicht alle Textareas des Formulars ausgeblendet werden sollen, sollten die auszublendenden auch per Klasse ansprechbar sein.

<form id="myForm" action="">  
  <input type="checkbox" onchange="[code lang=javascript]document.forms.myForm.className = (this.checked ? 'compact' : '');
~~~"/>  
  <textarea class="hide">Diese Textarea wird ausgeblendet.</textarea>  
  <textarea>Diese Textarea wird nicht ausgeblendet.</textarea>  
</form>[/code]  
  
Man kann sich auch von der Checkbox zum zugehörigen Formular im DOM hochhangeln. Wenn die Checkbox Kind des Formulars ist:  
  
~~~html
<form action="">  
  <input type="checkbox" onchange="[code lang=javascript]this.parentNode.className = (this.checked ? 'compact' : '');
~~~"/>  
  <textarea class="hide">Diese Textarea wird ausgeblendet.</textarea>  
  <textarea>Diese Textarea wird nicht ausgeblendet.</textarea>  
</form>[/code]  
  
Im Stylesheet:  
  
~~~css
.compact .hide  
{  
  display: none;  
}

Qapla'