Forms disabled="disabled" altenative

[The Joker]

Hi,

ich habe ein Formular, dass zwei Radiobuttons mit den Möglichkeiten A und B besitzt.

Ich möchte jetzt, dass man wenn a ausgewählt wird, sofort darunter die zugehörigen Checkboxen a1,a2,a3 erscheinen, ohne dass die Seite neu geladen muss. Bei B soll dann b1,b2,b3 erscheinen. Das einzige was ich finde, ist ist disabled=disabled und document.write. Ich habe jetzt mal in die Radiobuttons onclick='ChanceRadio()' eingefügt, und mir per alert ausgeben lassen welcher Radiobutton angeklickt wurde. Klappt alles. Nun muss ich aber in die Funktion mit document.write eigentlich die jeweiligen Checkboxen einfügen. Wie geht das? Wenn ich den ganzen Code hinzufüge, wird es nicht unter die drei Checkboxen gepackt, sondern der ganze bisherige Form Aufbau und Seitencontent gelöscht... Ich möchte, dass sie einfach UNTER den beiden Radiobuttons erscheinen. Oder gibt es da noch eine Altenative zu?

Danke

[Sven Rautenberg]

Moin!

ich habe ein Formular, dass zwei Radiobuttons mit den Möglichkeiten A und B besitzt.

Ich möchte jetzt, dass man wenn a ausgewählt wird, sofort darunter die zugehörigen Checkboxen a1,a2,a3 erscheinen, ohne dass die Seite neu geladen muss.

Regle das mit dem Setzen von CSS-Eigenschaften bzw. passend formatierten Klassen. "display:block" und "display:none".

In Verbindung mit einer Library wie jQuery ist das kinderleicht. Und auch als explizit "nackt" programmierter Code ist da nicht viel zu beachten.

- Sven Rautenberg

[Gunnar Bittersmann]

@@The Joker:

nuqneH

ich habe ein Formular, dass zwei Radiobuttons mit den Möglichkeiten A und B besitzt.
Ich möchte jetzt, dass man wenn a ausgewählt wird, sofort darunter die zugehörigen Checkboxen a1,a2,a3 erscheinen, ohne dass die Seite neu geladen muss. Bei B soll dann b1,b2,b3 erscheinen. Das einzige was ich finde, ist ist disabled=disabled und document.write.

Nein, 'document.write()' ist verkehrt; damit kannst du nichts nachträglich im bestehenden Dokument verändern.

Damit dein Formular auch ohne JavaScript funktioniert, müssen erstmal alle Checkboxen im Markup stehen. Das sollte in etwa so aussehen:

<form action="">  
  <fieldset>  
    <legend>Auswahl</legend>  
    <input type="radio" name="select" value="A" id="A"/><label for="A">A</label>  
    <input type="radio" name="select" value="B" id="B"/><label for="B">B</label>  
    <fieldset id="optionsA">  
      <legend>Optionen für A</legend>  
      <input type="checkbox" name="optionA" value="A1" id="A1"/><label for="A1">A1</label>  
      <input type="checkbox" name="optionA" value="A2" id="A2"/><label for="A2">A2</label>  
      <input type="checkbox" name="optionA" value="A3" id="A3"/><label for="A3">A3</label>  
    </fieldset>  
    <fieldset id="optionsB">  
      <legend>Optionen für B</legend>  
      <input type="checkbox" name="optionB" value="B1" id="B1"/><label for="B1">B1</label>  
      <input type="checkbox" name="optionB" value="B2" id="B2"/><label for="B2">B2</label>  
      <input type="checkbox" name="optionB" value="B3" id="B3"/><label for="B3">B3</label>  
    </fieldset>  
    <p><button type="submit">OK</button></p>  
  </fieldset>  
</form>

Für den gewünschten Effekt sollte gar kein JavaScript erforderlich sein, sondern nur CSS: Für nicht selektierte Radiobuttons [CSS3-SELECTORS §6.6.4, §6.6.7] blendet man per Geschwisterselektor [CSS3-SELECTORS §8.3.2] die entsprechende Checkboxengruppe aus:

#A:not(:checked)~#optionsA { display: none }  
#B:not(:checked)~#optionsB { display: none }

Funktioniert im Firefox 3.5.5, nicht aber in Webkits, Opera (warum eigentlich nicht?) und IE (warum überrascht mich das nicht?).

Also doch per JavaScript. Die Checkboxengruppen werden per Nachfahrenselektor nur ausgeblendet, wenn JavaScript aktiviert ist. Dazu dem 'html'-Element [PERFORMANCE-BP2] bzw. 'body'-Element [Cheatah] eine Klasse "js" geben und mit Nachfahrenselektor ausblenden.

Beim Click auf die Radiobuttons ändert man die Klasse des Formulars und blendet die entsprechende Checkboxengruppe ein.

document.documentElement.className += " .js";  
document.getElementById("A").onclick = function () { this.form.className = "selectedA"; };  
document.getElementById("B").onclick = function () { this.form.className = "selectedB"; };

Im Stylesheet:

.js #optionsA, .js #optionsB { display: none }  
.js .selectedA #optionsA { display: block }  
.js .selectedB #optionsB { display: block }

Qapla'

PS: Eigentlich sollte schon beim Aufrufen der Seite ein Radiobutton angewählt sein: [icke]

[MudGuard]

Hi,

#A:not(:checked)~#optionsA { display: none }

#B:not(:checked)~#optionsB { display: none }

>   
> Funktioniert im Firefox 3.5.5, nicht aber in Webkits, Opera (warum eigentlich nicht?)  
  
Vielleicht wünschen die sich Whitespace um die Tilde?  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

#A:not(:checked)~#optionsA { display: none }

#B:not(:checked)~#optionsB { display: none }

> >   
> > Funktioniert im Firefox 3.5.5, nicht aber in Webkits, Opera (warum eigentlich nicht?)  
  
Hm, weiß nicht, was ich da getestet hatte, aber Opera kann’s doch.  
  
  

> Vielleicht wünschen die sich Whitespace um die Tilde?  
  
Nö. Warum sollten sie auch?  
  
Webkits haben ein Problem mit ':checked' und dem Geschwisterselektor.  
  
'`:not(:checked)`{:.language-css}' für ein Element bereitet ihnen keine Probleme.  
  
Wenn im Markup für den Radiobutton "A" @checked="checked" gesetzt wird, wird auch initial die Checkboxgruppe angezeigt.  
  
Bei einer Zustandsänderung der Radiobuttons wird aber nicht auf das Geschwisterelement übertragen.  
  
Hat jemand einen WebKit-Bugzilla-Account und mag das mal melden? Ich sehe nicht ein, warum ich denen zusätzlich zu einem Gefallen auch noch meine Daten schicken soll.  
  
Qapla'

-- 
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)