[Javascript] checkbox is checked / 체크 여부 확인 / 스크롤 막기

메뉴 버튼을 만들 때 checkbox의 체크 여부를 통해 메뉴가 열리고 닫히는 애니메이션을 만들었다.

 

문제는 메뉴가 열리고 나서도 스크롤이 계속 진행되었는데

이 부분은 스크립트로 처리하였다.

 

메뉴는 따로 스크롤이 필요 없을 만큼 짧기 때문에 body에서 스크롤을 막아주었다.

 

.hidden {
  height:100%; 
  min-height:100%; 
  overflow:hidden !important; 
  touch-action:none;
  }

이 css가 body에 적절하게 들어갈 수 있도록 스크립을 짜면 끝!

 

문제는 체크 여부 스크립을 어떻게 짜야하는지 감이 오지 않아 서치 해보았다.

https://stackoverflow.com/questions/9887360/how-can-i-check-if-a-checkbox-is-checked

How can I check if a checkbox is checked?

// JavaScript
const someCheckbox = document.getElementById('someID');

someCheckbox.addEventListener('change', e => {
  if(e.target.checked === true) {
    console.log("Checkbox is checked - boolean value: ", e.target.checked)
  }
if(e.target.checked === false) {
    console.log("Checkbox is not checked - boolean value: ", e.target.checked)
  }
});

 

체크박스를 클릭하였을 때 checked여부를 if문으로 돌리면 간단하게 구현할 수 있었다.

 

document.querySelector(".menu").addEventListener('change', e => {
  if (e.target.checked === true) {
    document.querySelector("body").classList.add("hidden");
  }
  if (e.target.checked === false) {
    document.querySelector("body").classList.remove("hidden");
  }
});

위의 있는 코드에서 내가 원하는 방식으로 코드를 구현했다.

항상 .addEventListener('click',()=>{}) 만 사용했는데, change는 어떤 요소인지 확인해 보았다.

 

HTMLElement: change event

change는 <input>, <select>, <textarea>에서 사용자가 요소의 값을 수정할 때 실행된다. 

가장 첫 줄에도 나와있듯 checkbox의 체크 여부를 확인할 수 있다고 한다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

HTMLElement: change event - Web APIs | MDN