Erweiterte Optionen über Checkbox ?

[rossixx]

Kann man über eine checkbox weitere Optionen zum auswählen realisieren, ohne die Seite neu laden zu müssen ?

Vielleicht mit JavaScript?

if(checkbox==1) dann zeige weitere Optionen ?!?

<INPUT TYPE="checkbox" NAME="weitere_opt" VALUE="1"> 

[wahsaga]

Re: Erweiterte Optionen über Checkbox ?

Entweder bereits vorher vorhandene, unsichtbare Elemente einblenden - oder on-the-fly neue erzeugen und ins Dokument einhängen.

[rossixx]

OK - aber wie wirds gemacht ?

        <div style="display: none;" nix zu sehen</div> 

wie bekomme ich das ganze zu sehen ?

Und wie geht on-the-fly ?

[wahsaga]

Re: OK - aber wie wirds gemacht ?

Original geschrieben von rossixx
wie bekomme ich das ganze zu sehen ?

In dem du die Formatierung dynamisch änderst (style-Objekt, oder Klasse eines Vorfahrenelementes).

Und wie geht on-the-fly ?

DOM, Stichworte createElement/appendChild. (Im IE aber etwas problematisch, was Forumlarelemente angeht.)

[Kropff]

@ts
gib dem div eine id. dann kannst du mit

document.getElementById('id_name').style.display = 'block'; 

es sichtbar machen. wenn du es übers dom manipulieren willst, schau dir mal das hier und ggf. das hier an.

peter

[rossixx]

erster Schritt gelöst

function zeig () {
document.getElementById("a1").style.display = "block";
}

<INPUT TYPE="checkbox" onclick="zeig()">

<div id="a1" style="display: none;"> nix zu sehen</div> 

OK - Danke

Kann man das Sichtbar machen auch umkehren - also den Teil wieder verschwinden lassen ???

[wahsaga]

Re: erster Schritt gelöst

Original geschrieben von rossixx
Kann man das Sichtbar machen auch umkehren - also den Teil wieder verschwinden lassen ???

Nimm all deine Geisteskraft zusammen, schau dir an, was du vorher im CSS als Wert für display stehen hattest, überlege dir, ob man diesen Wert vielleicht per JavaScript ebenfalls setzen könnte - und lass' dich für diese gedankliche Glanzleistung entsprechend feiern.

[rossixx]

[JavaScript] GELÖST

function zeig (){
var a1 = document.getElementById('a1')
    if(a1) a1.style.display = (a1.style.display == 'none') ? '' : 'none';
}