Antworten auf deine Fragen:
Neues Thema erstellen

Javascript - Elemente durch Checkboxen sichtbar machen

Sinane

Puttmacherin

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:

HTML:
#Os1 {
         display: none;
}

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

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

HTML:
<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
 

mwxx

Nicht mehr ganz neu hier

AW: Javascript - Elemente durch Checkboxen sichtbar machen

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

Sinane

Puttmacherin

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"
HTML:
<input name="s1" type="checkbox" id="s1" onclick="optionensichtbarkeit();">

Irgendwie klappt das nicht...
 

Aelfry

Web Developer

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 ;)

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

owieortho

Aktives Mitglied

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

Puttmacherin

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 :D

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

Web Developer

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
 

Tory

Noch nicht viel geschrieben

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:

PHP:
        <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 />

Javascript:
<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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben