Javascript - Elemente durch Checkboxen sichtbar machen

[Sinane]

Huhu,

ich habe ein Formular, bei dem man verschiedene Optionen auswählen kann. Ich möchte jetzt, dass unter dem Formular die ausgewählten Checkboxen notiert werden.

Leider habe ich nicht viel Ahnung und es folgendermaßen gelöst:

#Os1 {
         display: none;
}

<input name="s1" type="checkbox" id="s1" checked>

<span id="Os1">Pangea</span>

<script type="text/javascript">
         function optionensichtbarkeit() {
                 if(s1.checked) {
                         document.getElementById("Os1").display = inline;
                 }
         }
</script>

Es passiert aber nichts. Muss ich die Funktion an irgendeiner Stelle ausführen? Ich möchte ja, dass es immer funktioniert, sichtbar oder unsichtbar wird, je nach checkbox, und ich will nicht, dass man irgendwo aktualisieren muss...

Wo liegt da mein Denkfehler?


Liebe Grüße
Sinane

 

[Aelfry]

AW: Javascript - Elemente durch Checkboxen sichtbar machen

Wo liegt da mein Denkfehler?

Du musst die Funktion natürlich auch aufrufen: Stichwort "event"

<input name="s1" type="checkbox" id="s1" onclick="optionensichtbarkeit();">

 

[mwxx]

AW: Javascript - Elemente durch Checkboxen sichtbar machen

versuch mal statt .display .style.visibility = visible | hidden

 

[Sinane]

AW: Javascript - Elemente durch Checkboxen sichtbar machen

versuch mal statt .display .style.visibility = visible | hidden

Das sieht bei mehreren Optionen hintereinander dann doof aus leider.

Du musst die Funktion natürlich auch aufrufen: Stichwort "event"

<input name="s1" type="checkbox" id="s1" onclick="optionensichtbarkeit();">

Irgendwie klappt das nicht...

 

[Aelfry]

AW: Javascript - Elemente durch Checkboxen sichtbar machen

Irgendwie klappt das nicht...

Ich seh gerade, dass du noch einen Fehler drin hast: es fehlt ein "style".
Außerdem würde ich noch ein else hinzufügen

function optionensichtbarkeit() {
	if (s1.checked) {
		document.getElementById("Os1").style.display = "inline";
	} else {
		document.getElementById("Os1").style.display = "none";
	}
}

 

[Sinane]

AW: Javascript - Elemente durch Checkboxen sichtbar machen

Ahhh das style war's *doing....*

Vielen Dank

 

[owieortho]

AW: Javascript - Elemente durch Checkboxen sichtbar machen

Beim ersten Laden wird die Checkbox angehakt gezeigt aber kein Text, erst beim wegklicken und anschließendem wiederanhaken erscheint der Text. Daher entweder die checkbox nicht als Standard gecheckt lassen oder im CSS das display auf inline setzen.

O.

 

[Sinane]

AW: Javascript - Elemente durch Checkboxen sichtbar machen

Beim ersten Laden wird die Checkbox angehakt gezeigt aber kein Text, erst beim wegklicken und anschließendem wiederanhaken erscheint der Text. Daher entweder die checkbox nicht als Standard gecheckt lassen oder im CSS das display auf inline setzen.

O.

Danke, das hatte ich vergessen

Eine Frage noch: Die Optionen stehen jetzt alle nacheinnander. Schreib ich in den Text aber Kommas rein, steht am Ende der Aufzählung auch ein Komma. Gibt es eine Möglichkeit, nur ein Komma auszugeben, wenn noch eine Option folgt?

 

[Aelfry]

Eine Frage noch: Die Optionen stehen jetzt alle nacheinnander. Schreib ich in den Text aber Kommas rein, steht am Ende der Aufzählung auch ein Komma. Gibt es eine Möglichkeit, nur ein Komma auszugeben, wenn noch eine Option folgt?

Wie sieht denn der Code aus, mit dem du deine Checkboxen/Optionen erzeugst?
Am besten zeigst du mal etwas mehr vom Code, als nur eine Funktion.



Gesendet von meinem GT-I9300 mit Tapatalk

 

[xover]

Ich weiss, ein bisschen spät.

Aber muss es nicht heissen:
if (s1.checked == checked) ?

 

[Duddle]

Aber muss es nicht heissen:
if (s1.checked == checked) ?

Nein, das Attribut checked des input-Tags ist ein boolescher Datentyp, also entweder true oder false.


Duddle

 

[Tory]

Hallo. Ich stehe gerade vor einem ähnlichen Problem. Bis hierher klappt es ja ganz gut, aber ich habe jetzt viele Checkboxen und unter jeder einzelnen sollen weitere Checkboxen angezeigt werden, wenn die Hauptcheckbox angezeigt wird. Also eine Baumstruktur mit mehreren Hauptebenen und jeweiligen Unterebenen.

Der bisherige Code funktioniert für die 1. Hauptcheckbox, aber nicht merh für die 2. und 3. Hauptcheckbox.

Also sowas hab ich jetzt:

        <ul>
            <li>
                <p><?php echo "<input type=\"checkbox\" name='bevölkerung' id='hauuptauswahl' onclick='optionensichtbarkeit()'>";?>Bevölkerung</br></p>
                <ul id='unterauswahl'>
                    <li><?php echo "<input type=\"radio\" name='bevölkerung_anzahl_31.12.2012'>";?>Bevölkerung Anzahl 31.12.2012</li>
                    <li><?php echo "<input type=\"radio\" name='bevölkerung_anzahl_31.12.2002'>";?>Bevölkerung Anzahl 31.12.2002</li>
                    <li><?php echo "<input type=\"radio\" name='veränderung'>";?>Veränderung in % - 2002-2012</li>
                    <li><?php echo "<input type=\"radio\" name='durchsnitt_veränderung'>";?>Durchschnittliche Veränderung in % pro Jahr - 2002-2012</li>
                </ul>
            </li><br />



            <li>
                <p><?php echo "<input type=\"checkbox\" name='bevölkerungsprognose' id='hauptauswahl' onclick='optionensichtbarkeit()'>";?>Bevölkerungsprognose</br></p>
                <ul id='unterauswahl'>
                    <li><?php echo "<input type=\"radio\" name='bevölkerung_anzahl_31.12.2011'>";?>Bevölkerung Anzahl 31.12.2011</li>
                    <li><?php echo "<input type=\"radio\" name='bevölkerung_anzahl_31.12.2021'>";?>Bevölkerung Anzahl 31.12.2021</li>
                    <li><?php echo "<input type=\"radio\" name='bevölkerung_anzahl_31.12.2031'>";?>Bevölkerung Anzahl 31.12.2031</li>
                    <li><?php echo "<input type=\"radio\" name='veränderung_2011-2021'>";?>Veränderung in % - 2011-2021</li>
                    <li><?php echo "<input type=\"radio\" name='veränderung_2011-2031'>";?>Veränderung in % - 2011-2031</li>
                </ul>
            </li><br />

<script type="text/javascript">
    function optionensichtbarkeit() {
        if (hauptauswahl.checked) {
            document.getElementById("unterauswahl").style.display="block";
        }   
        else {
            document.getElementById("unterauswahl").style.display="none";
        }
    }
</script>

Man muss dazu sagen, ich bin ziemlich neu in der ganzen Materie...ich verstehe es meistens, wenn ich es lese, aber von alleine draufkommen tu ich nie... mir fehlt einfach die Übung.

Danke im Voraus für die Hilfe.

 

[Chickenshooter]

Hallo

Vielleicht hilft dir eines von diesen, als fertige Lösung weiter....


oder
JavaScript Tree Menu

mfg