Fabian: Element nach einem Radiobutton aus-/einblenden

Hallo,

Ich möchte gerne eine Liste von Radiobuttons anlegen. Ein auf jeden Radiobutton folgender Container mit weiteren Formularelementen soll nur dann sichtbar sein, wenn der entsprechende Radiobutton angewählt ist. So 100% funktioniert das leider nicht: das angezeigte reagiert nicht darauf, ob ich einen Button anwähle. Mein Versuch:

input[type="radio"]+div{  
	display: none  
}  
input[type="radio"][checked]+div{  
	display: block  
}

Und der passende Ausschnitt aus der HTML-Datei:

<form>  
	<input type="radio" name="Zahlmethode" checked="checked"/> Beschreibung  
	<div><p>Versteckt!</p></div>  
	  
	<input type="radio" name="Zahlmethode"/>Beschreibung  
	<div><p>Versteckt!</p></div>  
</form>  

Das erste versteckte Element wird angezeigt, sobald ich die Seite lade. Schließlich ist ja der erste Radiobutton auch angewählt. Wenn ich jetz aber den anderen anklicke, passiert leider genau gar nichts (außer dass er angewählt wird). Wird dabei intern nicht das checked-Attribut gesetzt? Offenbar ja nicht, oder wie darf ich das verstehen?

Getestet habe ich das Ganze mit Firefox 3.6 und Iron 7.0.5. Ich hoffe, jemand kann ich hier etwas aufklären. Ich will dazu eigentlich ungern JS zu Hilfe nehmen.

Beste Grüße,
Fabian.

  1. Hi,

    dafür gibts den Pseudo-Selektor :checked.

    ~dave

    1. Besten Dank!

  2. input[type="radio"]+div{

    display: none
    }
    input[type="radio"][checked]+div{

    /* versuche
      input[type="radio"][checked="checked"]+div
    */

    display: block
    }

      
    mfg Beat
    
    -- 
    
    ><o(((°>           ><o(((°>  
    
       <°)))o><                     ><o(((°>o  
    Der Valigator leibt diese Fische
    
    1. /* versuche
        input[type="radio"][checked="checked"]+div
      */

      Das ist BS. Man muss schon das DOM manipulieren, damit das funktioniert.

      mfg Beat

      --
      ><o(((°>           ><o(((°>
         <°)))o><                     ><o(((°>o
      Der Valigator leibt diese Fische