Radio-Button ein- und ausblenden

[Sigge]

Hallöchen,

Gibt es eine Möglichkeit Radio-Button ein- oder auszublenden?
Ich habe mich schon halb tot gesucht. Vielleicht gebe ich ja den falschen Suchbegriff ein! Alle Antworten beziehen sich auf die Nutzung der Radiobutton nicht aber (wie ich es möchte) auf den Umgang mit ihnen und die entsprechenden Anweisungen im Script für die Radio-Button.

<form name="form-1becken">
      <p align="center" style="line-height:100%; margin-top:0; margin-bottom:0;">&nbsp;</p>
      <p style="line-height:100%; margin-top:0; margin-bottom:0;" align="center">Becken<input type="radio" name="becken" OnClick="lage1_li()" checked >links<input type="radio" name="becken" OnClick="lage1_re()" >rechts</p>
</form>
......
......
<form name="form-2becken">
      <p align="center" style="line-height:150%; margin-top:0; margin-bottom:0;">&nbsp;</p>
      <p style="line-height:150%; margin-top:0; margin-bottom:0;" align="center">Becken<input type="radio" name="becken" OnClick="lage2_li()" checked>links<input type="radio" name="becken" OnClick="lage2_re()" >rechts</p>
</form>

Erst nach Betätigen eines von 2 Button (Schaltflächen) sollen jeweils die entsprechenden (beim Start keine, sonst: form-1becken bzw. form-2becken) Radio-Button sichtbar werden.

Danke für Eure Hilfe

Sigge

[Peter Pan]

Hi!

Ich habe mich schon halb tot gesucht.

:((

Ich glaube Du suchst display
 und
style

off:PP

[Sigge]

Ich glaube Du suchst display
und
style

off:PP

Meine beiden erfolglosen Versuche:

document.form-1becken.becken.style.display = "none";

document.form-1becken.becken[0].style.display = "none";

geht nix

Sigge

[igor]

versuchs mal mit sowas in der Art

function wKunde () {
  if (document.find.cKunde[0].checked == true) {
    var deaktiviert = false;
    var aktiviert   = true;
    document.find.Kunde[1].style.visibility = 'hidden';
    document.find.Kunde[0].style.visibility = 'visible';
  } else {
     deaktiviert = true;
     aktiviert   = false;
    document.find.Kunde[1].style.visibility = 'visible';
    document.find.Kunde[0].style.visibility = 'hidden';
  }
  document.find.Kunde[0].disabled = deaktiviert;
  document.find.Kunde[1].disabled = aktiviert;
}

<input type='radio'  name='cKunde' value='ja'    onclick="wKunde ();" > text
<input type='radio'  name='cKunde' value='nein'  onclick="wKunde ();" checked> list<br>

[vaudi]

Hallöchen,

versuchs mal mit sowas in der Art

function wKunde () {
  if (document.find.cKunde[0].checked == true) {
    var deaktiviert = false;
    var aktiviert   = true;
    document.find.Kunde[1].style.visibility = 'hidden';
    document.find.Kunde[0].style.visibility = 'visible';
  } else {
     deaktiviert = true;
     aktiviert   = false;
    document.find.Kunde[1].style.visibility = 'visible';
    document.find.Kunde[0].style.visibility = 'hidden';
  }
  document.find.Kunde[0].disabled = deaktiviert;
  document.find.Kunde[1].disabled = aktiviert;
}

<input type='radio'  name='cKunde' value='ja'    onclick="wKunde ();" > text
<input type='radio'  name='cKunde' value='nein'  onclick="wKunde ();" checked> list<br>

Grundsätzlich guter Vorschlag, nur ist es günstiger,

a) das / die Elemente einen div zu setzen und diesen zu bearbeiten
  b) nicht visibility, sondern display zu modifizieren
     eingeblendet: display = '';
     ausgeblendet: display = 'none';

Bei visibility kann es sein, dass der Browser zwar nicht anzeigt, aber Platz reserviert. Div + display bewirkt, dass bei Einblenden der folgende Bereich nach unten verschoben wird und beim Ausblenden wieder hochrückt.

Tip: den div im Quelltext als sichtbar festlegen, und bei onLoad per JavaScript verstecken. Damit stellst du sicher, dass die Elemente bei den Experten, die JavaScript deaktiviert haben, trotzdem verfügbar sind.

MfG
vaudi

[Sigge]

Tip: den div im Quelltext als sichtbar festlegen, und bei onLoad per JavaScript verstecken. Damit stellst du sicher, dass die Elemente bei den Experten, die JavaScript deaktiviert haben, trotzdem verfügbar sind.

MfG
vaudi

Hej vaudi,

das war auch mein Grundgedanke, nur wie?
Mir fehlt hier gänzlich der Durchbklick :((

Sigge

[vaudi]

Hallöchen,

das war auch mein Grundgedanke, nur wie?

Indem du den bei "onClick" hinterlegten Funktionsaufruf nochmal am Ende der Datei notierst. Bei den entsprechenden Buttons schreibst du vermutlich was in der Art:

<input type="button1" name="zeigen1" onClick="javascript:EinAusblenden(auswahl1);">

Dann einfach am Ende der Datei einen javascript-Block notieren und

EinAusblenden(auswahl1);

reinschreiben. Die Funktion EinAusbenden() muss zu dem Zeitpunkt natürlich bekannt sein, und der Button muss ebenfalls schon existieren. Durch das Schreiben des Funktionsaufrufs ohne irgend eine Bedingung am Ende der Datei wird die Funktion einmalig beim Laden der Seite ausgeführt, ohne dass du explizit ein onLoad-Ereignis dafür brauchst.

MfG
vaudi

[Sigge]

Hallöchen,

das war auch mein Grundgedanke, nur wie?

Indem du den bei "onClick" hinterlegten Funktionsaufruf nochmal am Ende der Datei notierst. Bei den entsprechenden Buttons schreibst du vermutlich was in der Art:

<input type="button1" name="zeigen1" onClick="javascript:EinAusblenden(auswahl1);">

Dann einfach am Ende der Datei einen javascript-Block notieren und

EinAusblenden(auswahl1);

reinschreiben. Die Funktion EinAusbenden() muss zu dem Zeitpunkt natürlich bekannt sein, und der Button muss ebenfalls schon existieren. Durch das Schreiben des Funktionsaufrufs ohne irgend eine Bedingung am Ende der Datei wird die Funktion einmalig beim Laden der Seite ausgeführt, ohne dass du explizit ein onLoad-Ereignis dafür brauchst.

MfG
vaudi

Nett gesagt, aber das ist nicht mein Problem, eine Routine aufzurufen um den entsprechenden Befehl zu aktivieren.
Es handelt sich um Radio-Button, die ich verstecken will und ähnlich deines Vorschlages aktivieren (zeigen) will.
Die sind verdammt hartnäckig.

MfG

Sigge

[vaudi]

Hallöchen,

das war auch mein Grundgedanke, nur wie?

Sorry, das hatte ich darauf bezogen, dass die per Javascript versteckten Elemente bei deaktiviertem Javascript trotzdem zugänglich sind. Da hilft nun mal nur, wenn sie erst beim Laden der Seite versteckt werden. Ansonsten könntest du das Problem haben, dass die Elemente nie sichtbar sind.

Wenn du dazu die oben vorgeschlagene Funktion wKunde nimmst, dann wäre zu notieren:

  document.find.cKunde[0].checked = true;  
  wKunde ();  

MfG
vaudi

[Sigge]

Hallöchen,
 und danke für euren Einsatz.

Auf das Naheliegende kommt man zu Schluss: getElementById

Beim Start:
document.getElementById("becken1").style.display = "none";
document.getElementById("becken2").style.display = "none";

je nach Aufruf:
document.getElementById("becken1").style.display = "inline";
document.getElementById("becken2").style.display = "none";

oder umgekehrt

man muss lediglich eine ID vergeben

MfG Sigge

[Struppi]

Meine beiden erfolglosen Versuche:

document.form-1becken.becken.style.display = "none";

document.form-1becken.becken[0].style.display = "none";

geht nix

Falls du dir mal die Fehlerkonsole anschaust wüßtest du auch warum.

document.form - 1becken.becken[0].style.display

Das ist eine Subtraktion, wenn im Name eines Elementes Sonderzeichen vorkommen, musst du das Schema 4 verwenden.

Struppi.

[Struppi]

Erst nach Betätigen eines von 2 Button (Schaltflächen) sollen jeweils die entsprechenden (beim Start keine, sonst: form-1becken bzw. form-2becken) Radio-Button sichtbar werden.

Wenn ich dich richtig verstanden habe suchst du sowas in der Art:
<script type="text/javascript">

function checkBecken(el) {  
 var f = el.form;  
 var other_form = el.form.name == 'form-1becken'? 'form-2becken': 'form-1becken';  
  
 // Welcher Radiobutton ist _nicht_ gechecked?  
 var idx;  
 for(var i = 0; i < f.becken.length; i++) if(!f.becken[i].checked) idx = i;  
  
 // Im anderen Formular den entsprechenden Radiobutton ankreuzen  
 document.forms[other_form].becken[idx].checked = true;  
  
}  

~~~~~~html
</script>  
</head><body>  
<form name="form-1becken">  
      Becken<input type="radio" name="becken" onclick="checkBecken(this)" checked >  
   links<input type="radio" name="becken" onclick="checkBecken(this)" >rechts  
</form>  
<form name="form-2becken">  
    Becken  
 <input type="radio" name="becken" onclick="checkBecken(this)" checked>links  
 <input type="radio" name="becken" onclick="checkBecken(this)" >rechts  
</form>  

Struppi.