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

체크박스 상태 읽어 오기

• 체크박스 상태를 확인하고 싶을 때
• 체크박스 상태를 변경하고 싶을 때

구문

요소.checked 선택 상태 확인

설명

input 요소의 type 속성을 checkbox로 설정하면 체크박스가 표시됩니다. 체크박스는 유저가 on/off 상태를 전환할 수 있습니다. 자바스크립트에서 checked 속성을 사용해 요소에 접근이 가능합니다. checked 속성 타입은 Boolean입니다. 다음은 체크박스 B(#cbB)에 checked속성을 부여해 true를 확인합니다.

실습

index.html

<label>
  <input type="checkbox" id="cbA" value="A">
  체크박스 A
</label>
<label>
  <input type="checkbox" id="cbB" value="B" checked>
  체크박스 B
</label>
<label>
  <input type="checkbox" id="cbC" value="C">
  체크박스 C
</label>

---

script.js

const cbA = document.querySelector('#cbA');
const checkedA = cbA.checked; // 선택 상태 확인
console.log(checkedA);

const cbB = document.querySelector('#cbB');
const checkedB = cbB.checked; // 선택 상태 확인
console.log(checkedB);

const cbC = document.querySelector('#cbC');
const checkedC = cbC.checked; // 선택 상태 확인
console.log(checkedC);

---

체크 상태 설정

자바스크립트로 체크박스의 상태를 변경하기 위해서는 checked 속성에 진릿값을 대입합니다. true는 체크 상태, false는 체크가 해제된 상태를 설정합니다.

const element = document.querySelector('#cbA');
element.checked = true; // 체크 상태 설정