HTML Checkbox zeigt nur bestimmte DIV?

3 Antworten

FaTech
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, programmieren
31.03.2022, 09:56 
<script defer>
document.getElementsByClassName("CheckBoxClass")[0].addEventListener("onchanged", ()=>{
  if(document.getElementsByClassName("DIVClass")[0].style.display == 'none')
{
  document.getElementsByClassName("DIVClass")[0].style.display = 'block';
}
else
{
  document.getElementsByClassName("DIVClass")[0].style.display = 'none'
}
});
</script>

Dafür brauchst du JavaScript. So sollte es gehen
jherbrich  31.03.2022, 09:58

Ja nur das ich nicht bei ClassName sondern getElementByID machen würde. Das wäre in diesem Fall sinvoller ;-)

LG, Jenni

0
EinAlexander  31.03.2022, 10:40
Dafür brauchst du JavaScript

Nein. Dafür reicht HTML und CSS.

1
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
31.03.2022, 09:55
Würde gerne das eine Checkbox in html, beim anklicken div xy anzeigt und beim abwählen wieder ausblendet. 
<style>
#showbox { display:none }
#show:checked + #showbox { display:block }
</style>
<input type="checkbox" name="show" id="show">
<div id="showbox">
hello world
</div>

Alex
jherbrich
31.03.2022, 09:57

Hallo,

Du kannst mit JavaScript auf das ClickEvent reagieren (ein EventListner erzeugen). Dadrinnen fragst du den Status der Checkbox ab und dann kannst du das Style Atribute via Javascript ändern.

Zum abfragen der Checkbox findest du hier Beispielcode https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Das mit dem div kannst du ganz einfach so lösen https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

function myFunction() {
  var x = document.getElementById("myDIV");
  if (document.getElementById("myCheck").checked === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

So sollte es funktionieren. Ich habe für dich die myFunction aus dem Beispiel abgewandelt. Checkbox hat die id myCheck und das DIV hat die id myDIV. Wichtig, Groß und Kleinschreibung beachten.

Viel Sapß beim Programmieren ;-)

LG, Jenni
Woher ich das weiß:Recherche