nntp2http.com
Posting
Suche
Optionen
Hilfe & Kontakt

Re: onClick Background-Color einer Checkbox ändern

Von: Robin Rattay (rotora@gmx.net) [Profil]
Datum: 20.06.2008 12:29
Message-ID: <1bf199a9-9da4-4c1c-829e-509af16071f9@p25g2000hsf.googlegroups.com>
Newsgroup: de.comp.lang.javascript
On 20 Jun., 09:38, Adrian Stern <adrian.st...@phzh.ch> wrote:
> Ich möchte eine Checkbox wenn sie geklickt wird, mit einer Farbe
> Hinterlegen.
> Oder am besten gleich den hintergrund der darumliegenden Tabellenzelle.
>
> Wie greiffe ich darauf zu?
>
> _javascript: document.Formular.IDdesElements.???

Formular-Elemente werden im Elements-Collection des Formulars mit
dessen Namen nicht ID angesprochen:

document.NameDesFormulars.NameDesElements

Wobei es eindeutiger und lesbarer ist die "lange" Form zu benutzen:

document.forms["NameDesFormulars"].elements["NameDesElements"]

Altenativ können alle HTML-Elemente (nicht nur Formular-Elemente) mit
der ID angesprochen werden:

document.getElementById("IdDesElements")

In deinem Fall brauchst du aber beides nicht, da im Event-Handler die
Referenz zum Checkbox mit this erreichbar ist (siehe unten).

> verschachtelt ist das ganze so:
>
> <td>
>         <span style="background-color:Yellow;">
>                 <input id="ID" type="checkbox"
name="Name" />
>         </span><
> /td>

Ist der SPAN wirklich nötig/richtig? Du willst doch den Hintergrund
der ganzen Zelle und nicht nur "drum herum" markieren, oder?

> Wie setze ich den Hintergrund eines Elements?

ReferenzZumElement.style.backgroundColor = "yellow";

> Wie kriege ich das darüberliegende Element heraus?

parentNode

Einfaches Beispiel:

<td>
<input type="checkbox" name="Name"
onclick="this.parentNode.style.backgroundColor = (this.checked ?
'yellow' : 'white')" />
</td>

Wenn du es öffter einsetzt ist es besser das ganze in eine Funktion zu
packen und this als Parameter zu übergeben.

Robin
[ Auf dieses Posting antworten ]

Antworten