Как при загрузке страницы сделать чтобы контент отображался при условии checkbox?

Question

[aopil]

Есть такой чекбокс:

<input id="test" value="1" onclick="Click(this);" type="checkbox">

В Click я задаю условие, при котором, если checkbox нажат, то делаю что-то такое:

document.getElementById('cst').style.display='none';

или наоборот

document.getElementById('cst').style.display='blocked';

Все работает, но после перезагрузки страницы я вижу выбранную галочку, но onclick не выполняется, т.е. если checkbox выбран, то я ожидаю что будет отображаться контент, если снять галочку и званого поставить, то все отображается.

Вопрос: Как сделать, чтобы при загрузке страницы, если checkbox выбран, то контент отображался?

Answer 1

[reinmaker90]

контенту по умолчанию задать display = none, а потом добавляйте block, не лучший вариант, но работать будет

document.addEventListener("DOMContentLoaded", (e) => {
  const div = document.querySelector("div"),
    inp = document.querySelector("input");
  inp.checked = true;
  if (inp.checked) div.classList.add("active");
  inp.addEventListener("change", (e) => {
    if (e) div.classList.toggle("active");
  });
});

Comments

[aopil]

reinmaker90 что-то не понятно сложное... Может быть есть примеры живые?) Я очень не силен в js...

[aopil]

reinmaker90 почему нельзя сделать как-то так:

if (document.getElementById('asdfdfsdf').checked==true)
{
document.getElementById('cst').style.display='blocked';
}