Auswertung von Radiobuttons ohne Submitbutton

[tami]

hi,

Dafür brauchst du kein JavaScript. Das geht mit CSS: Du lässt alle Tabellen, deren zugehöriger Radiobutton nicht angewählt ist, nicht anzeigen.

HTML:

<input type="radio" name="myRadioGroup" id="ctrl-foo"/><label for="ctrl-foo">foo</label>

<input type="radio" name="myRadioGroup" id="ctrl-bar"/><label for="ctrl-bar">bar</label>
<input type="radio" name="myRadioGroup" id="ctrl-baz"/><label for="ctrl-baz">baz</label>
<table id="foo"> … </table>
<table id="bar"> … </table>
<table id="baz"> … </table>

>   
> CSS:  
> ~~~css

#ctrl-foo:not(:checked) ~ #foo,  

> #ctrl-bar:not(:checked) ~ #bar,  
> #ctrl-baz:not(:checked) ~ #baz  
> {  
>   display: none;  
> }

Zumindest in modernen Browsern.

Schön!

Viele unschöner, aber zum Grundverständnis von Javascript vielleicht ein Ansatz:

  
divA: <input type="radio" name="radio_test" value="divA"><br>  
divB:<input type="radio" name="radio_test" value="divB">  
<div id="divA" style="display:none">  
divA<br>  
divA<br>  
divA<br>  
divA<br>  
</div>  
<div id="divB" style="display:none">  
divB<br>  
divB<br>  
divB<br>  
divB<br>  
</div>  
<script>  
[code lang=javascript]  
inputFields = document.getElementsByTagName("input");  
hiddenDivs = document.getElementsByTagName("div");  
for (var i=0; i<inputFields.length; i++) {  
	inputFields[i].onchange = function() {  
		for (var j=0; j < hiddenDivs.length; j++) {  
			if(hiddenDivs[j].id === this.value) {  
				hiddenDivs[j].style.display = "block";  
			} else {  
				hiddenDivs[j].style.display = "none";  
			}  
		 }		  
	}  
}  

</script>

[/code]

mfg

tami