체크박스 체크여부 가져오기

Question

<input type=checkbox id =check-btn onchange=onChangeHandler();>
function onChangeHandler(){  
   var checkbox = document.getElementById(check-btn);
    if (checkbox.checked == true){
          document.getElementById(checkTheTable).style.display = ;
       } else{
          document.getElementById(checkTheTable).style.display = none;
     }
}

작성하여 체크박스 표시할 때 테이블이 보이고 uncheck할 때 테이블을 숨기는 기능을 만들었습니다.

그런데 수정화면에 들어갔을 때,
체크박스에 체크표시가 되어 있지 않고 펼쳐진 테이블만 보이는 상황인데,
펼쳐진 상태를 인식하고 체크박스에 체크가 표기되도록 하는 방법이 없을까요?

즉, 수정화면에 들어갔을 때 아래 화면과 같은 상태로 보여지길 희망합니다.

김대현 · Accepted Answer

날것의 JS코드 오랜만인 느낌이네요.

<input type=checkbox id =check-btn onchange=showTableWhenChecked();>
function showTableWhenChecked() {  
    const checkbox = document.getElementById(check-btn);
    document.getElementById(checkTheTable).style.display = checkbox.checked ?  : none;
}

여기까지는 좋았는데, 수정 화면으로 진입했을 때, checked여부에 따라 checkTheTable을 보일지 말지 처리하는 부분이 추가로 필요하겠네요. onchange 이벤트 핸들러는 말 그대로, 변화가 있을 때만 불리는 거라, 최초값이 설정된 상황에는 불리지 않는 상태입니다.

checkbox의 value는 값에 따라 잘 읽어놨다고 가정했을 때, 해당 화면 진입하고 나서, 그러니까.. 예를 들면, window.onload 같은 곳에 걸어서 showTableWhenChecked()를 한번 호출해줘도 되겠죠.