[JavaScript] 자바스크립트에서 체크박스 상태 변경 확인하기

159_자바스크립트에서 체크박스 상태 변경 확인하기

[적용]

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

---

[문법]

이벤트	의미
change	input 요소 변경 시 이벤트

---

[내용]

체크박스 상태의 변경은 change 이벤트로 감시가 가능하다.

addEventListener()를 사용해 이벤트 핸들러를 설정한다.

이벤트 핸들러 내부 함수는 다음의 링크에 있는 체크박스 상태 읽어오기 방법을 사용한다.

https://stonefree.tistory.com/345

[JavaScript] 자바스크립트에서 체크박스 상태 읽어오기

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

// 체크박스 참조
const cb = document.querySelector('#cbA');
cb.addEventListener('change', (event) => {
  // 체크박스 상태 확인
  const value = event.target.checked;
  
  // 화면에 표시
  const log = `체크박스 A는 ${value}로 변경되었습니다.`;
  document.querySelector('.log').innerHTML = log;
});

 

실행결과

체크박스를 체크하면 상태 변경을 확인할 수 있다.

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김