gegenseitige Prüfung

[Gunnar Bittersmann]

@@Wolfgang (Rentner):

nuqneH

Mit bedienen einer Checkbox soll ein Div sichbar werden.
Wenn nun eine weitere Checbox angeklickt wird, soll ein evtl. sichtbares Div wieder verschwinden und ein neues Div angezeigt werden.

Es soll nur jeweils eine Box sichtbar sein? Und wenn einmal eine sichtbar gemacht wurde kein Zurück in den Anfangszustand (keine sichtbar) geben?

Dann sind nicht Checkboxen, sondern http://de.selfhtml.org/html/formulare/auswahl.htm#radiobuttons@title=Radio-Buttons die geeigneten UI-Elemente. Und deren Beschriftung sollte ein http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=Label sein, damit auch dies anclickbar ist. (Fitts’s law)

Per JavaScript sollten nicht Stile geändert werden, sondern „JavaScript ist wunderbar geeignet, die DOM-Objekte auf eine Weise zu verändern, die in CSS genutzt werden kann.“ [Cheatah]

Am besten einem gemeinsamen Vorfahrenelement der Boxen ('html' und 'body' bieten sich an) eine Klasse geben, die den aktuellen Zustand widerspiegelt:

<input type="radio" name="controls" id="control1" onclick="[code lang=javascript]document.body.className = 'state1';"/> <label for="control1">Box 1</label>
<input type="radio" name="controls" id="control2" onclick="document.body.className = 'state2';"/> <label for="control2">Box 2</label>
<div id="box1">Dieses ist Box 1.</div>
<div id="box2">Dieses ist Box 2.</div>[/code]

(Wenn 'body' außerdem noch andere Klassen hat, die nicht überschrieben werden dürfen, wird’s etwas komplizierter.)

Ich hab die IDs vereinfacht und die Inline-Styles (pfui!) entfernt. Sämtliche Stilangaben gehören ins Stylesheet. Per Nachfahrenselektor [CSS2 §5.5] werden die Boxen eingeblendet:

#box1, #box2  
{  
  display: none;  
  width: 100px;  
  height: 100px;  
}  
  
#box1 { background: red }  
#box2 { background: green }  
  
.state1 #box1, .state2 #box2 { display: block }

Für moderne Browser ist allerdings gar kein JavaScript erforderlich. Die Boxen lassen sich als nachfolgende Geschwister gechecketer Radio-Buttons selektieren. [CSS3-SELECTORS §6.6.4.2, §8.3.2]:

#control1:checked~#box1, #control2:checked~#box2 { display: block }

Qapla'