js) 자바스크립트로 체크박스에서 체크된 요소만 모두 찾기

가상 클래스 선택자 :checked 를 사용하여 체크된 체크박스들만 모두 선택할 수 있다.

선택자로 선택된 node를 찾아 조작할 수 있다.

const checked = document.querySelector("input[type='checkbox']:checked")

 

 

또한, 프로퍼티 속성을 다루듯이 사용할수도 있다.

아래 예제는 내가 전체 체크박스를 눌렀을 때, 다른 체크박스들을 모두 선택되게 하거나, 모두 해제하게 하는 로직을 구현한 방법이다.

input type="checkbox"인 노드는 .checked 식으로 프로퍼티 속성을 다루듯이 사용할 수 있다.

const primeCheckbox = document.querySelector("input[type='checkbox']") // 맨 첫번째 체크박스가 전체 체크박스.

primeCheckbox.addEventListener("click", configCheckbox)

// 전체 선택 or 전체 선택해제 함수
function configCheckbox() {
  const checkboxEls = document.querySelectorAll("input[type='checkbox']"); //체크박스인거 모두 선택
  if (primeCheckbox.checked) {
    checkboxEls.forEach((el) => (el.checked = true));
  } else {
    checkboxEls.forEach((el) => (el.checked = false));
  }
}