Html-code zeigen wenn checkbox aktiviert

[Jerremias]

hi, ich suche gerade intensiv nach einer möglichkeit wie ich einen teil meines html codes erst dann anzeigen kann wenn eine bestimmte checkbox aktiiert ist, was ich bisher gefunden hab hat sich leider immer nur auf ein inputfeld beschränkt, aber wie mach ich das mit text bzws ganzen tabellenzeilen?

gruss

 

[ele]

Etwa so:

<div id="VerstecktesZeugs" style="display: none">
    Jetzt kannst du mich sehen.
</div>

<input type="checkbox" onclick="document.getElementById('VerstecktesZeugs').style.display = 'block'"> Aktivier mich mich!

Der Code ist natürlich absolut unschön, aber er zeigt das Prinzip.

 

[Jerremias]

sehr cool, danke, jetzt muss ich nur noch wissen wie ich das mache das der text wieder weggeht wenn ich das kästchen wieder deaktiviere
also, als frage gestellt, wie mach ich das des nun wieder weggeht wenn ich den haken wegmache?

 

[undefined]

<input type="checkbox" onclick="document.getElementById('VerstecktesZeugs').style.display=this.checked?'block':'none';">

 

[ele]

<div id="VerstecktesZeugs" style="display: none">
    Jetzt kannst du mich sehen.
</div>

<input type="checkbox" onclick="document.getElementById('VerstecktesZeugs').style.display = (this.checked) ? 'block' : 'none'"> Aktivier mich mich!

Edit: Da war wohl einer schneller.

 

[Jerremias]

dankeschön, klappt sehr gut!
wie sicher ist der code mit alten browserversionen etc.?

 

[undefined]

wie sicher ist der code mit alten browserversionen etc.?

Der Code geht dann in die Hose, wenn ein Browser getElementById nicht kennt. Solche Browser darf man meiner Meinung nach vernachlässigen, da schon sehr alt. Über eine Abfrage, ob der Browser das beherrscht kannst Du zumindest vermeiden, daß der sich querstellt.

 

[ele]

Was zu bedenken ist: Auch bei modernen Browsern kann JavaScript deaktiviert sein, dann funktioniert es natürlich nicht.

 

[Jerremias]

hi, danke nochmal für eure hilfe.

ich habe jetzt 3 checkboxen und 3 html codes die dadurch aktiviert werden, klappt recht gut

aber jetzt habe ich noch eine vierte checkbox, und während diese aktiviert ist soll der html code auch dann nicht erscheinen wenn die anderen entsrpechenden dafür abgehakt werden. sobald diese checkbox deaktiviert wird und die jeweils entsprechenden anderen boxen aktiv sind soll der code wieder gezeigt werden, kriegt man das hin mit javascript?

 

[Jerremias]

hallo nochmal, hab das nun alles soweit hinbekommen will jetz aber noch was neues machen, und zwar einen code anzeigen wenn ein link angeklickt wird und gleichzeitig noch ein neues fenster öffnen.

also ungefähr so:
<a href="neueseite.htm" onFocus="document.getElementById('text').style.display=this.checked?'block':'none';" target="_blank">Hier klicken</a>

also das geht natürlich nich weil das igentlich ein coe für eine checkbox ist, aber ich weiss nich wie ich es formulieren muss das es auch dort klappt?!
passieren soll wenn man klickt:
eine neue seite öffnet sich
auf der ursprungsseite wird ein html code angezeigt

wie kann ich das machen?

 

[casaout]

Guten Morgen

Ich weiss, dieser Beitrag ist schon recht alt, habe aber trotzdem eine Frage.

Ähnlich wie bei Jerremias hat sich der Versteckte Inhalt nicht enfernt, nachdem er durch das Anklicken eingefügt wurde. Ihr habt ihm den folgenden Code empfohlen:

<input type="checkbox" onclick="document.getElementById('VerstecktesZeugs').style.display=this.checked?'block':'none';">

Ich habe dasselbe statt mit Checkbox mit Radiobuttons gemacht. Dies funktioniert auch super, ausser dass der Text nicht mehr verschwindet, hier mein Code:

<input type="radio" name="data[feldtyp]" <?php echo $text_status; ?> value="Text" onclick="document.getElementById('VersteckteFeldlaenge').style.display = (this.checked) ? 'block' : 'none'"/> Text
<input type="radio" name="data[feldtyp]" <?php echo $textbox_status; ?> value="Textbox" onclick="document.getElementById('VersteckteFeldlaenge').style.display = (this.checked) ? 'block' : 'none'"/> Textbox
<input type="radio" name="data[feldtyp]" <?php echo $checkbox_status; ?> value="Checkbox"/> Checkbox

<div id="VersteckteFeldlaenge" style="display: none">
Versteckte Feldlänge : 100
</div>

vielen vielen Dank für eure Hilfe!

 

[ToM80]

Mir sieht dein HTML Code falsch aus.

Was schreibst du hier:

<?php echo $checkbox_status; ?>

 

[casaout]

sorry, für meine späte Antwort,...

Dort möchte ich definieren, ob die Checkbox schon ausgewählt ist/oder nicht - Ich arbeite in einem Formular

Ich konnte den Fehler finden, habe das Semikolon vergessen:

document.getElementById('VerstecktesZeugs').style.display=this.checked?'block':'none';

Leider habe ich ein anderes Problem: Wenn man die Checkbox an- und ab-wählt erscheint und verschwindet der Text wie gewünscht. Wenn ich nun das Formular abschicke und validieren lasse, ist zwar die Checkbox ausgewählt, aber der Inhalt erscheint nicht, wie er wohl müsste.


Was mache ich falsch?

Vielen Dank für eure Hilfe!

Gruss casaout

 

[kkapsner]

Den Style des Divs musst du dann natürlich auch mit PHP anpassen.

 

[casaout]

Den Style des Divs musst du dann natürlich auch mit PHP anpassen.

Danke für deine Antwort, aber was meinst du genau?

Hier ein Auszug:

<tr><td valign="top"><input type="checkbox" name="mob_1" value="1" onclick="document.getElementById('Hidden_mob_1').style.display=this.checked?'block':'none';" <? echo $checkbox2; ?>></td>
<td class="styleNormal" valign="top" colspan="4">Checkbox-Beschreibung</td></tr>

<div id="Hidden_mob_1" style="display: none">Versteckter Inhalt</div>

Danke

 

[casaout]

Mir sieht dein HTML Code falsch aus.

Was schreibst du hier:

<?php echo $checkbox_status; ?>

Oder kann man dies nicht tun?

Weiter oben im Skript kontrolliere ich, ob die Checkbox ausgewählt ist, wenn ja ist die Variable $checkbox_status gefüllt mit 'checked', wenn nein ist sie leer.

Kann man dies eleganter machen?

 

[kkapsner]

Ich meine das so, wie du den Status der Checkbox kontrollierst:

<div style="display: <?php echo $div_display;?>;">
	...
</div>

 

[casaout]

<div style="display: <?php echo $div_display;?>;">
	...
</div>

Danke für deine Antwort.

Leider klappt bei mir was nicht, was mache ich falsch?

Mein Code:

<? //Falls die Checkbox checked ist, wird sie auch wieder so angezeigt


if ($_POST["mob_1"] == '1') { $checkbox2 = "checked"; $div_display_mob_1 = ""; } ?>

<div id="Hidden_mob_1" style="display: <? if ($div_display_mob_1 != '') { echo $div_display_mob_1; } else { echo "none"; } ?>">Versteckter Text </div>

Danke für deine/eure Hilfe!

 

[kkapsner]

Was heißt "klappt nicht"?

Du solltest Variablen immer initialisieren - was bei $div_display_mob_1 nicht der Fall ist, wenn $_POST["mob_1"] != '1'.

 

[casaout]

Was heißt "klappt nicht"?

Das an/wegklicken und erscheinen/verschwinden des Textes klappt. Aber wie (auch vor den Änderungen) ist die Checkbox nach dem Absenden des Formulares zwar ausgewählt, aber nicht ausgeklappt.

Du solltest Variablen immer initialisieren - was bei $div_display_mob_1 nicht der Fall ist, wenn $_POST["mob_1"] != '1'.

Diese Variable wird hier neu definiert, was ist der Vorteil, wenn ich Sie mit $_POST schreibe?

Danke.