• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Klick auf Radio Button - set Visible/Hidden

R

rayn

Neues Mitglied
Hallo Leute,
ich habe ein für euch alte html/css Hasen wahrscheinlich ziemlich billiges Problem. Wie im folgenden html-text dargestellt habe ich 2 Tabellen mit jeweils 2 bzw. 3 Radiobuttons. Die zweite Tabelle (bzw. die drei unteren Radiobuttons) soll nur angezeigt werden, wenn der Button "E1" in der ersten Tabelle angeklickt ist. Ist der Button E2 angeklickt, sollen die Buttons "Zeig dich..." verschwinden.


<html>
<head>
<title>Test</title>

<script type="text/javascript">
function switcher()
{
if(document.form.oeff.value == 2)
{
document.getElementById('switched').style.visibility = 'visible';
}
else
{
document.getElementById('switched').style.visibility = 'hidden';
}
}
</script>
</head>
<body>

<table cellspacing=2 cellpadding=2>
<tr><td><b><u>Table 1:</u></b></td><td></td>
</tr>
</table>
<table cellspacing=2 cellpadding=2>
<tr>
<td><input onClick='switcher(this.2);' type="radio" name="7" value="1">E1</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input onClick='switcher(this.1);' type="radio" name="7" value="0">E2</td>
</tr>
<tr><td><br><br></td></tr>
</table>

<table cellspacing=2 cellpadding=2>
<tr>
<td></td><td colspan=3 style="font-weight: bold"></td></tr>
<tr><td><b><u>Table 2:</u></b></td>
</tr>
</table>
<table cellspacing=2 cellpadding=2>
<tr>
<td><input id="switched" type="radio" name="8" value="1">Zeig dich, wenn E1 angeklickt</td>
</tr>
<tr>
<td><input id="switched" type="radio" name="8" value="2">Zeig dich, wenn E1 angeklickt</td>
</tr>
<tr>
<td><input id="switched" type="radio" name="8" value="3">Zeig dich, wenn E1 angeklickt</td>
</tr>
<tr><td><br></td></tr>
</table>

</body>
</html>

Nix klappt, was mach ich falsch? Bin hier nicht sonderlich bewandert, direkte Codehilfe würde mir also sehr weiterhelfen (oder Links zu einem Beispiel, welches das macht, was ich möchte).

Grüße
 
Zuletzt bearbeitet:
Das ist keine HTML- und auch keine CSS-Frage, denn Du hast ein JavaScript-Problem.

Zunächst ist dein Fehler aber, dass Du die ID "switched" mehrfach vergeben hast. Eine ID darf nur 1 Mal pro Seite vergeben sein. Gib jedem Button eine eigene ID und pass den JavaScript-Code entsprechend an.

Dann sprichst Du die funktion "switched" mit 2 Parametern an - greifst aber im Script nicht auf diese zu.

Code: 
switcher(this.1);

Wenn Du diese Parameter nutzen willst, dann nutze sie auch im Script.

Code: 
function switcher(objekt, value)
{
..
}

Weiterhin wäre auch der verwendete Doctype interessant ..
 
So, ich hab jetzt den Code nach deinen Vorschlägen angepasst (wahrscheinlich nicht korrekt), aber ich bin da eher so der Dummy... man schelte mich also nicht dafür. Am Ende wird dieser Quelltext in ein php Dokument eingebunden, innerhalb einer Script Umgebung.

Code: 
<html>
<head>
<title>Test</title>

<script type="text/javascript">
function switcher(objekt, value)
{
      if(document.form.oeff.value == 2)
      {
            document.getElementById('rb1').style.visibility = 'visible';
            document.getElementById('rb2').style.visibility = 'visible';
            document.getElementById('rb3').style.visibility = 'visible';
      }
      else
      {
            document.getElementById('rb1').style.visibility = 'hidden';
            document.getElementById('rb2').style.visibility = 'hidden';
            document.getElementById('rb3').style.visibility = 'hidden';
      }
}
</script>
</head>
<body>

<table cellspacing=2 cellpadding=2>
<tr><td><b><u>Table 1:</u></b></td><td></td>
</tr>
</table>
<table cellspacing=2 cellpadding=2>
<tr>
<td><input onClick='switcher(this.2);' type="radio" name="7" value="1">E1</td>   
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input onClick='switcher(this.1);' type="radio" name="7" value="0">E2</td>
</tr>
<tr><td><br><br></td></tr>
</table>

<table cellspacing=2 cellpadding=2>
<tr>
<td></td><td colspan=3 style="font-weight: bold"></td></tr>
<tr><td><b><u>Table 2:</u></b></td>
</tr>
</table>
<table cellspacing=2 cellpadding=2>
<tr>
<td><input id="rb1" type="radio" name="8" value="1">Zeig dich, wenn E1 angeklickt</td>
</tr>
<tr>   
<td><input id="rb2" type="radio" name="8" value="2">Zeig dich, wenn E1 angeklickt</td>
</tr>
<tr>   
<td><input id="rb3" type="radio" name="8" value="3">Zeig dich, wenn E1 angeklickt</td>
</tr>
<tr><td><br></td></tr>
</table>

</body>
</html>

Geht immer noch nix, aber wie gesagt, ich stell mich auch ziemlich an...

Grüße
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben