Checkbox zum de/aktivieren von anderen Elementen

HTML Quelltext

<!DOCTYPE html>
<html>
    <head>
        <title>Checkbox zum de/aktivieren von anderen Elementen</title>
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="expires" content="0">
        
        <script type="text/javascript" src="./js/checkboxjs.js"></script>
 
        <link rel="stylesheet" type="text/css" href="./css/checkboxjs.css">
    </head>
    <body>
        <form id="gebdat" action="#" method="post">
            <fieldset>
                <legend>Anzeige von Geburtsdatum oder Alter</legend>
                <dl>
                    <dt>Möchten Sie die Anzeige von Geburtsdatum oder Alter unterbinden?</dt>
                    <dd><input type="checkbox" name="geb" id="geb"><label for="geb">Alter oder Geburtsdatum nicht anzeigen</label></dd>
                </dl>
                <dl id="auswahl">
                    <dt>Wählen Sie eine Darstellungsart aus</dt>
                    <dd><input type="radio" name="gebradio" id="geb1" value="1"><label for="geb1">Alter</label></dd>
                    <dd><input type="radio" name="gebradio" id="geb2" value="2"><label for="geb2">Tag, Monat</label></dd>
                    <dd><input type="radio" name="gebradio" id="geb3" value="3"><label for="geb3">Tag, Monat, Jahr</label></dd>
                </dl>
                <dl>
                    <dt>Name und Anschrift</dt>
                    <dd><label class="textlabel" for="vorname">Vorname:</label><input type="text" name="vorname" id="vorname"></dd>
                    <dd><label class="textlabel" for="nachname">Nachname:</label><input type="text" name="nachname" id="nachname"></dd>
                </dl>
            </fieldset>
            <dl>
                <dt></dt>
                <dd><input type="submit" name="gebdatsubmit" value="Absenden"></dd>
            </dl>
            
        </form>
 
        <div class="sourcecode">
            <h2>HTML Quelltext</h2>
 
<?php
require_once('Ixiter_Geshi.php');
echo IxiterGeshi_parseCode(file_get_contents(__FILE__));
?>
 
        </div>
 
        <div class="sourcecode">
            <h2>Javascript Quelltext</h2>
 
<?php
echo IxiterGeshi_parseCode(file_get_contents('./js/checkboxjs.js'), 'javascript');
?>
 
        </div>
 
        <div class="sourcecode">
            <h2>CSS Quelltext</h2>
 
<?php
echo IxiterGeshi_parseCode(file_get_contents('./css/checkboxjs.css'), 'css');
?>
 
        </div>
        <script type="text/javascript">run();</script>
<?php include('./piwik.php') ?>
    </body>
 </html>
 

(Sourcecode highlighting by Ixiters Hilighter)

Javascript Quelltext

/*
 * Javascript zum Beispiel: "Checkbox disabled Elementgruppen"
 */
 
/*
 * Fügt Arrays eine foreach Funktion hinzu
 * Wird hier nicht gebraucht, dient nur als Beispiel
 */
Array.prototype.foreacher = function( callbacker ) {
    for( var key=0; key<this.length; key++ ) {
        callbacker( key, this[ key ] );
    }
}
 
/*
 * Fügt Objekten eine foreach Funktion hinzu
 */
Object.prototype.foreacher = function( callbacker ) {
    for( var key in this ) {
        if(this.hasOwnProperty(key)) {
            callbacker( key, this[ key ] );
        }
    }
}
 
/*
 * Fügt Objekten eine ability Funktion hinzu
 * enabled oder disabled (input) Objekte
 */
Object.prototype.ability = function(a){
    var me = this;
    this.foreacher(function(key, val){
        me[key].disabled = a;
    })
}
 
/*
 * Initialisierungsroutine
 * Wird am Ende von body aufgerufen.
 * Besser als onload(), das erst aufgerufen wird, wenn alle Bilder und andere nachladbaren Elemente der Seite geladen sind.
 */
function run(){
    // Behandlungsroutine der CheckBox initialisieren - onclick()
    byid('geb').onclick = function(){
        // alle gebradio de/aktivieren
        byname('gebradio').ability(this.checked);
        // Bei Bedarf alle gebradio unchecken
        if(this.checked){
            byname('gebradio').foreacher(function(key, radio){
                radio.checked = false;
            })
        }
        // Schriftfarbe für die dl mit den gebradio anpassen
        byid('auswahl').style.color = (this.checked) ? 'gray' : 'black';
    }
    // Die Funktion einmal ausführen, um den Status von geb zu prüfen (nach Reload o.ä.)
    byid('geb').onclick();
}
 
/*
 * Gibt eine Referenz auf das Objekt mit der ID id zurück
 */
function byid(id){
    return document.getElementById(id);
}
 
/*
 * Gibt eine Referenz auf ein Objekt, dass alle Objekte mit dem Namen name enthält, zurück
 */
function byname(name){
    return document.getElementsByName(name);
}

CSS Quelltext

/*
    CSS Datei zum Beispiel: "Checkbox disabled Elementgruppen"
*/
body{
    font-family: verdana, georgia, arial, sans-serif;
}
.sourcecode {
    border:1px solid #c0c0c0;
    background-color:#f8f8f8;
    margin:10px 5px;
    padding:10px;
}
 
dl {
    padding:0;
    margin:0;
    margin-bottom:1em
}
dt {
    margin:0;
    padding:0;
    margin-left:120px;
    font-weight:bold;
}
dd {
    padding:0;
    margin:0;
}
 
form {
    width:50%;
    margin:0 auto;
    padding:1em 1.5em;
    background:#ffe8c0;
    border:4px solid #f0a080;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    behavior:url('css/border-radius.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
}
 
form fieldset {
    margin-bottom:1em;
    background:#d8f0ff;
    border:4px solid #80a0f0;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    behavior:url('css/border-radius.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
}
form fieldset legend {
    height:1.3em;
    font-size:1.1em;
    font-weight:bold;
    margin:1em 0 1em 1em;
    padding:0 .5em;
    background:#c0e0ff;
    border:4px solid #80a0f0;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    behavior:url('css/border-radius.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
}
 
#geb:checked+label {
    color:#f00000;
}
 
label.textlabel {
    float:left;
    width:120px; /* das gleiche Maß wird auch für margin-left bei dt, input[type="radio"] und input[type="checkbox"] verwendet */
    text-align:right;
    padding-top:3px;  /* Damit es hübscher aussieht*/
}
 
input[type="radio"], input[type="checkbox"] {
    margin-left:120px;
}
 
input[type="text"], input[type="password"] {
    margin-bottom: 4px;
}
input[type="submit"] {
    cursor:pointer;
    font-weight:bold;
    background:#f0e8c0;
    border:4px solid #e0c880;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    behavior:url('css/border-radius.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
}