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

158_자바스크립트에서 체크박스 상태 읽어오기

[적용]

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

---

[문법]

속성	의미	타입
input요소.checked	선택 상태 확인	진리값

---

[내용]

input 요소의 type 속성을 checkbox로 설정하면 체크박스가 표시된다.

체크박스는 유저가 on/off 상태를 전환할 수 있다.

자바스크립트에서 checked 속성을 사용해 요소에 접근이 가능하다.

checked 속성 타입은 Boolean이다.

다음은 체크박스 B(#cbB)에 checked 속성을 부여해 true를 확인하는 예시이다.

 

HTML                                                                                                                                                              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>

JavaScript                                                                                                                                                          main.js

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

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

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

console.log('checkedA 값', checkedA);  // 결과: false
console.log('checkedB 값', checkedB);  // 결과: true
console.log('checkedC 값', checkedC);  // 결과: false

 

자바스크립트로 체크박스의 상태를 변경하기 위해서는 checked 속성에 진리값을 대입한다.

true는 체크 상태, false는 체크가 해제된 상태를 설정한다.

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

 

---

 

 

 

 

 

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