hintergrundfarbwechsel bei selected radio button und hover

[hhelwig]

hallo an alle javascript-experten!

ich baue gerade einen kalkulator und arbeite dabei nur mit radio-inputs. dabei kann man zwischen 2 bis 10 elementen wählen, schritt für schritt.
bisher habe ich mit meinen beschränkten kenntnissen in javascript folgendes hinbekommen:
beim onmouseover ändert sich die hintergrundfarbe und bei onmouseout wieder zurück. auch kann der benutzer durch klick in das tr die auswahl treffen und muss nicht den radio-button klicken.

so sieht das ganze bisher aus:

///CSS///

.weiss
{
background:#fff;
}
.gelb
{
background:#feffea;
cursor:hand;
}

///HTML///

<table border="0" cellspacing="0">
<tr class="weiss"
onmouseover="className='gelb'"
onmouseout="className='weiss'" onmousedown="document.getElementById('1').checked = (document.getElementById('1').checked ? false : true);">
<td><img src=".jpg" alt="" /></td><td><b>text text</b><br />text text text</td>
<th><input id="1" type="radio" name="typ" value="..."></th>
</tr>
<tr class="weiss"
onmouseover="className='gelb'"
onmouseout="className='weiss'" onmousedown="document.getElementById('2').checked = (document.getElementById('2').checked ? false : true);">
<td><img src=".jpg" alt="" /></td>
<td><b>text</b><br />text text text</td>
<th><input id="2" type="radio" name="typ" value="..."></th>
</tr>
</table>

jetzt meine frage:
wie kann ich es schaffen, dass immer das ausgewählte input bzw. die tr die gelbe hintergrundfarbe hat?
zwar schaffe ich es die hintergrundfarbe per onclick einmal festzulegen, jedoch muss ja dies rückgängig gemacht werden, wenn eine andere auswahl getroffen wird. das deaktivieren des einen radios findet ja automatisch statt, wenn man einen anderen auswählt.

jetzt müsste man doch eigentlich eine art abfrage starten, die prüft, ob ein element ausgewählt wurde und wenn ja, dann die hintergrundfarbe ändert. diese funktion könnte man doch dann bei jedem onclick laufen lassen, oder nicht?

aber wie bekommt man das hin? ich habe leider nicht genug ahnung von javascript, aber vielleicht ja hiermit:

document.getElementById('1').checked ? ...

wäre sehr nett, wenn mir jemand nen tipp oder codeansatz geben könnte.

hoffe das ich alles richtig und verständlich erklärt habe!?!

vielen dank im voraus, henrik

[wahsaga]

hi,

wie kann ich es schaffen, dass immer das ausgewählte input bzw. die tr die gelbe hintergrundfarbe hat?
zwar schaffe ich es die hintergrundfarbe per onclick einmal festzulegen, jedoch muss ja dies rückgängig gemacht werden, wenn eine andere auswahl getroffen wird.

Merke dir den aktivierten Radiobutton - am einfachsten, in dem du dir einfach die Referenz auf ihn in einer Variablen ablegst.

Schaue nun bei jeder neuen Aktion zunächst, ob es bereits einen gemerkten gibt - wenn ja, setze diesen zurück, markiere danach den neuen, und merke dir diesen wiederum.

var welcherButtonWurdeZuletztAktiviert = false;  
  
function tuWasBeimAktivierenEinesRadiobuttons() {  
   if(welcherButtonWurdeZuletztAktiviert) {  
      //setze diesen Button zurück  
   }  
  
   // markiere aktuell akvitieren Button  
  
   welcherButtonWurdeZuletztAktiviert = aktuellAktivierterButton;  
}

das deaktivieren des einen radios findet ja automatisch statt, wenn man einen anderen auswählt.

Das ist aber bereits in HTML implementiert - was du vorhast, geht aber darüber hinaus.

gruß,
wahsaga

[hhelwig]

hi,

danke für die antwort. ich glaube du hast genau erkannt was ich brauche. leider kann ich das beschriebene nicht so ganz in javascript umsetzen. hab es versucht, aber ich krieg es nicht hin. habe halt leider noch nicht viel ahnung von javascript.

vielleicht kann mir ja jemand noch einen code schicken, wie ich an die eigenschaft checked komme. ich habe ja immer eine eindeutige id, aber wie geht das?

oder kann ich das nicht mit onclick machen, dass ich immer diese funktion laufen lasse?

Merke dir den aktivierten Radiobutton - am einfachsten, in dem du dir einfach die Referenz auf ihn in einer Variablen ablegst.

Schaue nun bei jeder neuen Aktion zunächst, ob es bereits einen gemerkten gibt - wenn ja, setze diesen zurück, markiere danach den neuen, und merke dir diesen wiederum.

var welcherButtonWurdeZuletztAktiviert = false;

function tuWasBeimAktivierenEinesRadiobuttons() {
   if(welcherButtonWurdeZuletztAktiviert) {
      //setze diesen Button zurück
   }

// markiere aktuell akvitieren Button

welcherButtonWurdeZuletztAktiviert = aktuellAktivierterButton;
}

  
  
vielen dank für jede hilfe.  
  
gruß henrik