Textarea mit einer Checkbox ausblenden

[inspiron]

Hallo,
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

Gruß

[henman]

hallo,

Kann mir bitte jemand ein Tip geben wie ich das lösen kann

zum Beispiel mit Javascript --> getElementsByName
und der CSS-Eigenschaft display

[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'

[Kai345]

[latex]Mae  govannen![/latex]

Bleibt also nur JavaScript: Wenn der Status der Checkbox geändert wird (Event 'change'),

Besser nicht. click sollte die bessere Wahl sein.

Cü,

Kai

[Gunnar Bittersmann]

@@Kai345:

nuqneH

Besser nicht.

In der Tat, im IE 6 funktioniert’s mit 'change' nicht. (Andere IEs hab ich jetzt nicht getestet.)

click sollte die bessere Wahl sein.

Yep. Ich hatte nur Bedenken, ob es dann auch mit Tastatur bedienbar ist. Ist es, 'click' feuert.

Qapla'

[inspiron]

Wow,
dankeschön s'funktioniert!

Danke, Gruß

[suit]

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

Jein - die Nachfahren-Begründung zählt nicht - es ginge auch mit dem adjacent sibling selector:

input[type=checkbox]+textarea {
display: none;
}
input[checked=checked]+textarea {
display: block;
}

Der Haken daran ist natürlich, dass ein nachträgliches Checken der Checkbox das DOM nicht verändert und kein checked-Attribut hinzufügt. Somit greift der zweite selektor nur, wenn die checkbox bereits vorbefüllt ist.

[Gunnar Bittersmann]

@@suit:

nuqneH

Der Haken daran ist natürlich, dass ein nachträgliches Checken der Checkbox das DOM nicht verändert und kein checked-Attribut hinzufügt.

Nein, das ist nicht der Haken. Dafür gibt es die Pseudoklasse ':checked'. [CSS3-SELECTORS §6.6.4]

Der Haken ist lediglich, dass die Checkbox vor den Textareas stehen muss und dass die Textareas Geschwister der Checkbox oder Nachfahren von solchen sein müssen.

Und wenn wir schon bei CSS 3 sind, dann bietet sich nicht der adjacent sibling combinator an, sondern der general sibling combinator. [CSS3-SELECTORS §8.3.2]

input:checked~.hide,  
input:checked~* .hide  
{  
  display: none;  
}

Qapla'

[inspiron]

Hallo,
momentan ist die Funktion so:
"Häckchen setzen Textarea weg!"

Was muß ich machen, das das genau anders herum funktioniert, also:
"Häckchen setzen Textarea da!"

Gruß

<form action="">

<input type="checkbox" onchange="[code lang=javascript]this.parentNode.className = (this.checked ? 'compact' : '');

>   <textarea class="hide">Diese Textarea wird ausgeblendet.</textarea>  
> </form>[/code]  
>   
> Im Stylesheet:  
>   
> ~~~css

.compact .hide  

> {  
>   display: none;  
> }

Qapla'

[Beat]

Hallo,
momentan ist die Funktion so:
"Häckchen setzen Textarea weg!"

Was muß ich machen, das das genau anders herum funktioniert, also:
"Häckchen setzen Textarea da!"

<form action="">

<input type="checkbox" onchange="[code lang=javascript]this.parentNode.className = (this.checked ? 'compact' : '');

  
bedingung ? 'compact' : ''  
wenn bedingung wahr, dann compact sonst nichts  
Wie man die zwei Resultate austauscht, bringst du selber fertig.  
  

> >   <textarea class="hide">Diese Textarea wird ausgeblendet.</textarea>  
> > </form>[/code]  
> >   
> > Im Stylesheet:  
> >   
> > ~~~css

.compact .hide  

> > {  
> >   display: none;  
> > }

mfg Beat

[EKKi]

Mahlzeit Gunnar Bittersmann,

<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]  
  
Besser:  
  
`<input type="checkbox" onchange="[code lang=javascript]this.form.className = (this.checked ? 'compact' : '');`{:.language-html}"/>[/code]  
  
  
MfG,  
EKKi  

-- 
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|