Axel Richter: Werte von versteckten Radiobuttons über Labels ändern

Beitrag lesen

Hallo,

es handelt sich dabei offensichtlich um kein Javascript-, sondern um ein CSS-Problem, denn wenn man einen Radiobutton mit dem Attribut "checked" vorselektiert, wird der so selektierte Button auch von der JS-Funktion answer() erkannt, nur gibt es halt die zuvor beschriebenen Einschränkungen beim Verändern der Werte über die LABEL-Elemente.

Ja, INPUTs mit display:none können offensichtlich nur im Mozilla und FF per Mausklick(eben über das LABEL-Element) erreicht werden. Man könnte mit Hilfe von position:relative und position:absolute etwas hinbasteln, das die Labels _über_ die Inputs legt, so dass diese dann _dadurch_ unsichtbar werden.

Das größere Problem ist aber: Wie erreicht man, dass der Nutzer den Erfolg seines Klicks überhaupt sieht, wenn der eigentliche Radiobutton nicht zu sehen ist? Da es im Ursprungsposting um Bilder ging, müsste man die Bilder bei Klick entsprechend der checked-Eigenschaft des Radiobuttons tauschen. Da man hierzu in jedem Fall, mangels CSS-Selector, JavaScript benötigt, kann man das dann auch zum Ändern der checked-Eigenschaft des Radiobuttons verwenden.

So z.B. (den Bildertausch habe ich weggelassen):

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
 form p {margin:0; padding:0;}  
 form p * {vertical-align:middle;}  
 form label img {height:32px; width:32px;}  
 input#r11, input#r12 {display:none;}  
</style>  
</head>  
<body>  
<form action="#" method="get">  
<p><input id="r11" type="radio" name="r1" value="v11"><label for="r11" onclick="this.form.r1[0].checked=!this.form.r1[0].checked;"><img src="Beispiel.jpg" alt="Bild r11" title=""></label></p>  
<p><input id="r12" type="radio" name="r1" value="v12"><label for="r12" onclick="this.form.r1[1].checked=!this.form.r1[1].checked;"><img src="Beispiel.jpg" alt="Bild r12" title=""></label></p>  
<p><input type="Submit" name="ok" value="OK"></p>  
</form>  
</body>  
</html>  

Das hat natürlich alle Nachteile einer Lösung, die nur mit JavaScript funktioniert.

viele Grüße

Axel