Grafische Radio und Check
Grafische Checkboxes und Radiobuttons
Die Checkbox und der Radiobutton lassen sich nicht stylen, auch nicht mit CSS, sie behalten ihren 3D look. Aber sie lassen sich durch ein Bild ersetzen, welches mit einem Hidden Feld verknüpft wird, das die Werte speichert. Die Bilder der Boxen und Butons können beliebig gestaltet werden, es braucht je ein Bild für den Off und den On Zustand.
Vorher
Checkbox
Radiobutton
Nachher
Zur Demonstration wird neben den Feldern der Wert der Hiddenfields ausgegeben.
Die Bilder müssten in den Browsercache vorgeladen werden.
firstChild.nodeValue
<script type="text/javascript">
function CheckBox(feld)
{
if(document.form[feld].value == 'true')
{
document.form[feld].value = 'false';
document.images[feld].src = 'images/f_check_of.gif';
document.getElementById('cbv').firstChild.nodeValue="off"; // nur Anzeige
}
else
{
document.form[feld].value = 'true';
document.images[feld].src = 'images/f_check_on.gif';
document.getElementById('cbv').firstChild.nodeValue="on"; // nur Anzeige
}
}
function RadioButton(radio,index,maxindex)
{
document.form[radio].value = index;
for(i=0;i<maxindex;i++)
{
if(index != i)
{document.images[radio+''+i].src = 'images/f_radio_of.gif';
document.getElementById('rb'+i+'v').firstChild.nodeValue=index+1; // nur Anzeige
}
else
{document.images[radio+''+i].src = 'images/f_radio_on.gif';
document.getElementById('rb'+i+'v').firstChild.nodeValue=index+1; // nur Anzeige
}
}
}
</script>
Die Checkbox sieht dann so aus (es braucht für jede ein Hiddenfield):
<a href="#" onclick="CheckBox('cb1'); return false;">
<img name="cb1" src="images/f_check_of.gif" alt="Checkbox" height="20" width="20" border="0" /></a>
Value von Checkbox 1: <span id="cbv">off</span>
<input type="hidden" name="cb1" value="false" />
Der erste Radiobutton sieht dann so aus (es braucht für alle nur ein Hiddenfield):
<input type="hidden" name="r1" value="0" />
<a href="#" onclick="RadioButton('r1',0,3); return false;">
<img name="r10" src="images/f_radio_of.gif" alt="Radiobutton 1" height="20" width="20" border="0" /></a>
Value von Radiobutton 1: <span id="rb0v">off</span>
Check den Code.