[책] 자바스크립트 코드 레시피 278 - 146일차

체크박스 상태 변경 확인하기

• 체크박스 변경 시 작업을 처리하고 싶을 때

구문

change

설명

체크박스 상태의 변경은 change 이벤트로 감시가 가능합니다. addEventListener()를 사용해 이벤트 핸들러를 설정합니다. 이벤트 핸들러 내부 함수는 앞서 기술한 체크박스 상태 읽어 오기 방법을 사용합니다.

실습

index.html

<label>
  <input type="checkbox" id="cbA" value="A">
  체크박스 A
</label>
<p class="log"></p>

---

script.js

const label = document.querySelector('label');
const cb = document.querySelector('#cbA');
cb.addEventListener('change', (event) => {
  const value = event.target.checked;
  const log = `체크박스 A는 <strong>${value}</strong>로 변경되었습니다.`;
  document.querySelector('.log').innerHTML = log;

  // 클릭하면 문항의 텍스트 가져오기 (응용: 시험지)
  if (value === true || label.innerText === '체크박스 A') { // 2가지가 성립되면
    console.log(label.innerText);
  }
});