Gernot Back: CheckBox - Hintergrund veraendern ...

Beitrag lesen

SELF-Forum

CheckBox - Hintergrund veraendern ...

Gernot Back Homepage des Autors
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln