JS: Seiteninhalt per Klick auf Checkbox einblenden

Elo_The_Kid · 12. November 2019 um 05:28

Hallo,

ich habe mehrere Checkboxen und möchte bei Klick auf bestimmte Checkboxen weiteren Seiteninhalt anzeigen. Ich habe versucht entsprechenden Code für diese Dropdown (Select) Felder umzuschreiben, leider funktioniert meine Lösung aber nicht. Weiß jemand, wo der Fehler liegt? Ich könnte mir vorstellen, dass u.U. nur wenig zu ändern ist.

 function f\_checkbox(){
 var select = document.getElementById('select\_checkbox[]').selectedIndex;
 document.getElementById('checkbox\_2').style.display = (select == 2? "block": "none");
 }
 1 |
 2 (einblenden)


 
 Bei Klick auf Checkbox 2 einblenden.

Schöne Grüße, Elo

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:28

Moin moin

var select =
document.getElementById(‚select_checkbox[]‘).selectedIndex;

selectedIndex steht wofür ?

ich seh kein select feld , ich seh nur checkboxen .

und ID wird nicht mit [] genutzt.

desweiteren fehlt auch der form tag .

sprich , mach deine Hausaufgaben selber.

Wenn du das alles beachtet hast, hast du auch schon die lösung.

gruss an den lehrer.

Elo_The_Kid · 12. November 2019 um 05:28

Welcher Lehrer? Mein Problem ist, dass ich JS nur alle heiligen Zeite benötige und immer nur in kleinen Dosen. Deshalb kann ich mich nie so recht durchringen, mir neben HTML, PHP und MySQL auch noch JS beizubringen. Wie auch immer, ich habe deine Tipps jetzt befolgt und bin immerhin schon soweit, dass ich bei Klick auf Checkbox 1 Seiteninhalt einblende (siehe unten). Wie die Einbindung für Checkbox 2 funktioniert, daran arbeite ich noch. Auch wäre es interessant, wie man denselben Seiteninhalt einblendet, wenn Checkbox 1 oder 2 geklickt wird. Vielen Dank!

 function f\_checkbox(){
 var select = document.getElementById('select\_checkbox').checked;
 document.getElementById('checkbox\_1').style.display = (select == 1? "block": "none");
 }

1 (einblenden) |
2

Bei Klick auf Checkbox 1 einblenden.

Elo_The_Kid · 12. November 2019 um 05:29

So, ich habe eine Lösung gefunden. Was ist davon zu halten? Ist sie performant?

 function f\_checkbox(){
 var select\_1 = document.getElementById('select\_checkbox\_1').checked;
 var select\_2 = document.getElementById('select\_checkbox\_2').checked;
 document.getElementById('checkbox').style.display = ((select\_1 == true || select\_2 == true)? "block": "none");
 }
 Für weiteren Seiteninhalt auf Checkbox 1 oder 2 klicken!

1 |
2 |
3

Bei Klick auf Checkbox 1 oder 2 einblenden.

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:29

Moin moin,

So, ich habe eine Lösung gefunden. Was ist davon zu halten?
Ist sie performant?

Bringt zwar nur 1/1000 millisekunde

function f\_checkbox(){
 if (typeof f\_checkbox.box == 'undefined') {
 f\_checkbox.box = document.getElementById('checkbox');
 f\_checkbox.checkone = document.getElementById('select\_checkbox\_1');
 f\_checkbox.checktwo = document.getElementById('select\_checkbox\_2');
 }
 f\_checkbox.box.style.display = ((f\_checkbox.checkone.checked == true || f\_checkbox.checktwo.checked == true) ? "block": "none");
}

iF00L · 12. November 2019 um 05:29

Hi,

weiß nich genau ob ich das richtig verstanden habe… aber willst du mehrere Seiteninhalte gleichzeitig mit den checkboxen anzeigbar machen… oder soll immer nur ein seiteninhalt zu einer geklickten checkbox erscheinen (und den vorherigen quasi ersetzen)?
in diesem fall würde ich dir radio buttons empfehlen!
damit kann man auch eine schön dynamische lösung erzeugen, denn ob performant oder nicht ist deine aktuelle lösung insoferm umständlich, dass wenn du später mehr seiteninhalte einbinden willst du dich jedesmal gesondert im javascript darum kümmern musst dass deine checkboxen überprüft werden!

bzw. wenn du wirklich mehrfachauswahl per checkbox benötigst dann würde ich im javascript trotzdem schleifen empfehlen, du hast ja nicht umsonst ein array an checkboxen in deren name-Attribut definiert…

solltest du allerdings nur zwei seiteninhalte haben und erwartest nicht dass das später mehr wird… dann ist deine lösung vollkommen akzeptabel

weitere fragen einfach fragen!
Grüße
iF00L

Elo_The_Kid · 12. November 2019 um 05:29

Danke für deinen Post. Ich benötige tatsächlich Checkboxen, da eine Mehrfachauswahl möglich ist und diese Auswahl auch an eine MySQL Datenbank übergeben wird. Mein Formular habe ich schon vor Monaten erstellt und möchte es jetzt erweitern.

Ich habe z.B. die Checkboxen „Tablet“, „Notebook“, „Desktop PC“. Wird „Tablet“ und/oder „Notebook“ gewählt, könnte z.B. ein weiteres Formularfeld für Displaygröße eingeblendet werden.

Ich erinnere mich, dass ich Probleme mit dem Übergeben von Varialben hatte, wenn der Name eines Formularelementes nicht der ID entsprochen hatte. Daher klingt deine Lösung mittels Schleife interessiert. Wie könnte so eine Lösung aussehen (wenn es nicht zuviele Umstände macht)? Schöne Grüße, Elo

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:29

da hat ich auch schon dran gedacht, wollt dem frager aber nicht was in mund legen.

z.b. würde ich es viel übersichtlicher schreiben .

boxanzeigen = false ;

if (checked_1) boxanzeigen = true;
if (checked_2) boxanzeigen = true;

if (boxanzeigen) die_boxanzeigen ;

so brauch mann nur noch if zeilen hinzufügen um die schalter zu bedienen.

aber es ist auch sehr unüblich zwei checkboxen für das gleiche Fenster zu haben .

eher würd ich eine funktion schreiben die z.b. den ihalt von checked 1 hineinschreibt und sich darum kümmert das das parent fenster sichtbar ist.

iF00L · 12. November 2019 um 05:33

Hey Elo,
sorry wegen der Verzögerung aber meine Zeit wächst leider auch nicht auf Bäumen

function f_checkbox(){
var checkboxArray = document.getElementsByName(„select_checkbox[]“);
for (var index = 0; index

Das wäre eine Möglichkeit alle checkboxen durchzugehen, zu überprüfen ob sie ausgewählt sind und dann je nach value der checkbox den korrespondierenden div-container anzuzeigen.
Allerdings finde ich die Lösung nicht so schick weil weiterhin wenn checkboxen und div-container hinzukommen die Bedingungen manuell eingefügt werden müssen, aber es klingt ja nicht so dass das bei dir zu hunderten checkboxen und somit massig arbeit führen kann.

(man könnte z.b. die IDs der div-container die anzuzeigen sind mit den values der checkboxen abstimmen, und dann kann man folgendes tun:smile:

// in der for-schleife
if (checkboxArray[index].checked) {
document.getElementById(‚div_‘+checkboxArray[index].value).style.display = ‚block‘;
}else{
document.getElementById(‚div_‘+checkboxArray[index].value).style.display = ‚none‘;
}

(Und schon musst du nur darauf achten dass ein neuer div-container die ID ‚div_WERT‘ bekommt wenn die checkbox die ihn aktivieren soll den value ‚WERT‘ hat.)
Es kann sein dass es mit dieser Lösung nicht mehr möglich ist 2 checkboxen für den gleichen div-container zu haben… musst mal ein bisschen rumüberlegen.

Viel Erfolg!
Grüße
iF00L

Elo_The_Kid · 12. November 2019 um 05:33

Vielen Dank für die Mühe. Ich werde mir die Lösung gleich am WE - wenn ich wieder zuhause bin - ansehen. Auf meinen PC habe ich sie bereits kopiert