Gernot Back: CheckBox - Hintergrund veraendern ...

Beitrag lesen

Hallo Norbert,

auf der Seite gibt es eine grosse Anzahl von CheckBoxen. Damit es der User leichter hat, moechte ich den Hintergrund der Tabellenzelle, in der die CheckBox steckt, farblich der Checked-Eigenschaft anpassen, also z.B. aktiviert=gruen, sonst grau.

Kann man das irgendwie gleich im CSS angeben, oder muss ich dies mit JavaScript ueber ein onClick-Ereignis realisieren ?
Oder gibt es vielleicht noch eine elegantere Loesung ?

In CSS ist die Welt noch in Ordnung; da richten sich -wenn überhaupt- Kinder nach den Eltern, niemals umgekehrt. Mit JavaScript kannst du die Verhältnisse aber auf den Kopf stellen. Im Prinzip so:

<TD><input type="checkbox" onclick="[code lang=javascript]if(checked)parentNode.style.backgroundColor='gray';else parentNode.style.backgroundColor='green'"></TD>[/code]

Den Eventhandler solltest du aber, da er ja häufiger vorkommt, nicht wie hier jeder Checkbox einzeln per inline-Code, sondern lieber über eine Initialisierungsfunktion zuweisen. Mit einer Farbwechselfunktion, die du sowohl onload für alle Checkboxen als auch beim Klickereignis auf jede einzelne aufrufst, kannst du es dann auch schaffen, dass die Farben stimmen, wenn man die Seite neu lädt und eine Checkbox bereits gesetzt ist, ohne dass der Nutzer erneut darauf geklickt hat.

Gruß Gernot