<!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">
/*
* Fügt Arrays eine foreach Funktion hinzu
* Wird hier nicht gebraucht, dient nur als Beispiel
*/
Array.prototype.foreach = function( callback ) {
for( var key=0; key<this.length; key++ ) {
callback( key, this[ key ] );
}
}
/*
* Fügt Objekten eine foreach Funktion hinzu
*/
Object.prototype.foreach = function( callback ) {
for( var key in this ) {
if(this.hasOwnProperty(key)) {
callback( key, this[ key ] );
}
}
}
/*
* Fügt Objekten eine ability Funktion hinzu
* enabled oder disabled (input) Objekte
*/
Object.prototype.ability = function(a){
var me = this;
this.foreach(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').foreach(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);
}
</script>
<style type="text/css">
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 */
}
</style>
</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>Quelltext dieser Webseite</h2>
<?php
require_once('Ixiter_Geshi.php');
echo IxiterGeshi_parseCode(file_get_contents(__FILE__));
/*
$src = file_get_contents(__FILE__);
$lang = 'website-ish';
$geshi = new Ixiter_Geshi($src, $lang);
$geshi->keyword_links = false;
echo $geshi->parse_code();
*
*/
?>
</div>
<script type="text/javascript">run();</script>
<?php include('./piwik.php') ?>
</body>
</html>