Textfarbe in Abhängikeit des ausgewählten Radiobutton

[kaiderunwissende]

Hallo ihr,
schön dass ich ins Board darf. Leider habe ich nach 60 Minuten suche im Web nichts gefunden, was mir wirklich weiterhilft.

Mein erstes Problem ist, dass in dem folgenden Code die Schriftfarbe rot sein soll, wenn "nein" checked ist, und grün, wenn "ja" checked ist (siehe auch den Kommentar im code).
Wie realisiere ich das in JavaScript?


Das zweite Problem ist möglicherweise off-topic, gehört aber zur selben Datei. Der Status, welcher Radio-Button angewählt ist, wird aus einer MySQL-Datenbank generiert. In der Tabelle laeufer gibt es die SET-Spalte bezahlt, in der dann "ja" oder "nein" steht.
Es ist bereits PHP-Code in dem Formular enthalten, der eine Verbindung zur Datenbank herstellt und Textfelder ausfüllt.
Wie kann ich Radiobuttons setzen?

<table cellspacing="2" cellpadding="2" border="0">
<tr style="color:red;">
    <td>Unterlagen abgeholt:</td> <!--JavaScript: Wenn status:checked=ja im radio-feld wo value=ja dann style="color:red;" else style="color:red;" oder so ähnlich :-) -->
    <td><input type="radio" name="unterlagen" checked="checked" value="nein">nein</td>
    <td><input type="radio" name="unterlagen" value="ja">ja</td>
</tr>

<tr style="color:green;">
    <td><br><br><br>Betrag bezahlt:</td>
    <td><br><br><br><input type="radio" name="betrag"  value="nein">nein</td>
    <td><br><br><br><input type="radio" name="betrag" checked="checked" value="ja">ja</td>
</tr>
<table>

Vielen Dank schonmal fürs Lesen, vielleicht hat einer einen heißen Tipp oder gar fertigen Code? Bin leider etwas unbedarft...

Gruß

Kai

 

[JocalAreaNetwork]

Mach dir einen span mit <span id="schriftzug">hier dein text</span>

Mit document.getElementById('schriftzug').style.color = "red"; solltest du das dann hinkriegen
Per document.getElementById('schriftzug').className greifst du btw auf die CSS-Klasse zu.

 

[kaiderunwissende]

Hi,

vielen Dank schonmal. Leider kenne ich mich wenig aus, wie bringe ich ich die von dir beschriebene Änderung des styles zusammen mit dem jeweils gecheckten Button? Wohl mit einer if-Schleife, oder Könntest du mir das vielleicht noch erklären oder noch besser zeigen?

Danke!

Kai

 

[JocalAreaNetwork]

Das geht:

<table cellspacing="2" cellpadding="2" border="0">
<tr>
    <td><span id="unterlagen_schrift">Unterlagen abgeholt:<span></td>
    <td><input type="radio" id="unterlagen_radio" name="unterlagen" checked="checked" value="nein" OnClick="unterlagen_change()">nein</td>
    <td><input type="radio" name="unterlagen" value="ja" OnClick="unterlagen_change()">ja</td>
</tr>

<tr>
    <td><br><br><br><span id="betrag_schrift">Betrag bezahlt:</span></td>
    <td><br><br><br><input type="radio" id="betrag_radio" name="betrag" value="nein" OnClick="betrag_change()">nein</td>
    <td><br><br><br><input type="radio" name="betrag" checked="checked" value="ja" OnClick="betrag_change()">ja</td>
</tr>
<table>

<script type="text/javascript">
function unterlagen_change() {
  if (!document.getElementById('unterlagen_radio').checked)
    document.getElementById('unterlagen_schrift').style.color="green";
  else
    document.getElementById('unterlagen_schrift').style.color="red";
}
function betrag_change() {
  if (!document.getElementById('betrag_radio').checked)
    document.getElementById('betrag_schrift').style.color="green";
  else
    document.getElementById('betrag_schrift').style.color="red";
}
unterlagen_change();
betrag_change();
</script>

 

[kaiderunwissende]

"Boah ey" Sensationell, das grundätzliche Prinzip habe ich glaube ich begriffen. Zwei Fragen tun sich auf: Lässt sich der span auch über die gesamte <tr> ausdehnen? Oder nimmt man dann ein <div>-Tag?
Wie bekommt man es hin, dass die Farbe sich nicht nur ändert, wenn man Button versetzt, sondern auch die Farbe aus der Vorauswahl bestimmt wird?

Vielen Dank schomal für den Code, er ist sehr aufschlussreich!

Gruß

Kai

 

[kaiderunwissende]

Zu kurz gedacht, sorry. Wenn man dem <tr>-Tag die ID gibt, funktionierts ja.
Jetzt muss ich das nur noch mit PHP verbinden und dann den durch das PHP-Skript voreigestellten Wert auslesen. Ohoh