CheckBox - Hintergrund veraendern ...

[Norbert]

Hallo,

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 ?

Gruss und Dank
Norbert

[Gernot Back]

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

[Norbert]

Hallo Gernot,

hatte schon befuerchtet, dass es ohne Eventhandler nicht abgeht.
Also - im Scriptbereich:

function setColor(idx) {
var tab = 'e' + idx;
var chk = 'c' + idx;
    if (document.getElementById(chk).checked) {
        document.getElementById(tab).bgColor = '#ccffcc';
    } else {
        document.getElementById(tab).bgColor = '#ffeeee';
    }
}

Und - je CheckBox:
onClick="setColor('idx')" // idx - Name der Checkbox

In CSS ist die Welt noch in Ordnung; ... f.f.

die Botschaft les' ich schon, allein mir fehlt der Glaube !

Z.B. in dem Script oben habe ich ewig gesucht, bis ich eine gueltige Eigenschaft gefunden habe. Urspruenglich wollte ich zwei Class-Definitionen erstellen und dann die Class-Eigenschaft switchen. Ging nicht, weil Class "Null oder nicht definiert" war. Auch einige andere, sonst durchaus uebliche Eigenschaften, brachten lediglich ein "undefined".

Also nochmals vielen Dank

Gruss Norbert

[Gernot Back]

Hallo Norbert,

hast du denn auch das Problem gelöst, dass wenn jemand die Seite neu lädt, die Checkboxen zwar schon gesetzt sind, die Hintergrundfarben der umgebenden Tabellenzellen aber wieder so wie auf Anfang?

Das kannst du nur, indem du die Funktion auch für jede einzelne Cjheckbox onload einmal aufrufst.

Z.B. in dem Script oben habe ich ewig gesucht, bis ich eine gueltige Eigenschaft gefunden habe. Urspruenglich wollte ich zwei Class-Definitionen erstellen und dann die Class-Eigenschaft switchen. Ging nicht, weil Class "Null oder nicht definiert" war. Auch einige andere, sonst durchaus uebliche Eigenschaften, brachten lediglich ein "undefined".

Eine Elementeigenschaft "class" gibt es in Javascript auch nicht; die heißt dort "className". Wenn du ein HTML-Attribut "class" vergibst, dann hat das betreffende Elementobjekt in JS eine entsprechende Eigenschaft "className". Aber insbesondere bei Hintergrundbildern rendert der IE manchmal Änderungen da nicht so gut wie wenn man über style.backgroundColor geht. Das würde ich dir übrigens auch empfehlen, denn das veraltete BGCOLOR-Attribut über bgColor anzusprechen, dürfte nicht in allen Browsern funktionieren.

Gruß Gernot

[Gernot Back]

Hallo nochmal, Norbert,

wenn ich dich richtig verstanden habe, war dein eigentliches Anliegen doch, den umgebenden Bereich ausgewählter und nicht-ausgewählter Checkboxen aufgrund ihrer hohen Anzahl farblich zu unterscheiden, damit der Nutzer einen schnelleren Überblick darüber hat.

Um das zu erreichen, braucht man den Quellcode aber nicht aufzublähen. Anstatt einen Eventhandler "onclick" als Attribut in jede einzelne Checkbox zu schreiben, kann man den Eventhandler ja auch dynamisch über eine Initialisierungsfunktion zuweisen. Bei der Zuweisung der CSS-Klasse verhält es sich nicht anders. Eine Initialisierungsfunktion hat überdies den Vorteil, dass man damit auch solche Checkboxen entsprechend hervorheben kann, die nach einem Neuladen der Seite bereits markiert sind, oder auch dann, wenn sich die Seite selbst wieder aufruft, weil z.B. noch nicht alle erforderlichen Angaben gemacht sind.

Wie sich so eine Seite verhält, bei der vor dem Neuladen bereits einige Checkboxen angewählt wurden, kannst du dir anhand folgender Testseite anschauen, die ich zur Demonstration gebastelt habe:

http://lernspielwiese.de/cboxparent.html

In Opera geht allerdings bei diesem Beispiel (anders als im IE und im Firefox) die Information verloren, ob Checkboxen ausgewählt sind oder nicht, und damit auch die farbliche Unterscheidung der umgebenden Tabellenzellen.

Hier der Quellcode:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
        "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Parentelementen von Checkboxen je nach deren Checkstatus Klassen zuweisen</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<style type="text/css">  
[code lang=css]  
.gray  { background-color:gray; }  
.green { background-color:green; }

</style>
<script type="text/javascript">

  
  
function init () {                     // Direkt nach dem (Neu-)Laden  
   var elem = document.myForm.elements;// innerhalb des Formulars "myForm"  
   for(i=0; i<elem.length; i++) {      // nur Elemente vom Type="checkbox"  
      if(elem[i].type.toLowerCase() == 'checkbox'){ // ungeachtet der Schreibung  
         elem[i].onclick = setColor;   // mit Eventhandler "onclick" versehen,  
         elem[i].preSet = setColor;    // aber nicht nur beim späteren Klicken,  
         elem[i].preSet();             // sondern gleich schon einmal ...  
      }  
   }  
}  
  
function setColor () {  
   var pCell = this.parentNode;        // ... deren jeweiliges Eltern-Element  
   if(this.checked)                    // je nachdem, ob selbst bereits ausgewählt  
      pCell.className = 'green';  
   else                                // oder nicht,  
      pCell.className = 'gray';        // über Klassenzuweisung gestalten.  
}  
  
window.onload = init;  

</script>
</head>
<body>
   <form name="myForm" action="#" method="post">
      <table>
         <tr>
            <td><input type="checkbox">&nbsp;eins</td>
         </tr>
         <tr>
            <td><input type="checkbox">&nbsp;zwei</td>
         </tr>
         <tr>
            <td><input type="text" size="50"
                value="Ich bin auch ein Inputelement, aber keine Checkbox."></td>
         </tr>
         <tr>
            <td><input type="checkbox">&nbsp;drei</td>
         </tr>
         <tr>
            <td>
               <textarea cols="20" rows="3">Ich bin kein Inputelement.</textarea>
            </td>
         </tr>
         <tr>
            <td><input type="checkbox">&nbsp;vier</td>
         </tr>
      </table>
   </form>
</body>
</html>
[/code]
Gruß Gernot