웹 브라우저로 예제 코드를 실행한 뒤 원하는 항목에 체크 표시를 합니다. 그러고 나서 앞에서 작성한 자바스크립트 코드를 콘솔창에 입력하고 실행하면 체크한 항목의 값이 출력됩니다.
체크박스를 모두 체크된 상태로 바꾸고 싶다면 자바스크립트로 checked 속성에 true를 할당하면 됩니다. 따라서 다음과 같이 작성하면 모든 체크박스에 체크 표시가 됩니다.
12/05/checkbox_set.html
<form>
<label><input type="checkbox" value="apple">사과</label>
<label><input type="checkbox" value="banana">바나나</label>
<label><input type="checkbox" value="orange">오렌지</label>
<label><input type="checkbox" value="melon">멜론</label>
</form>
<script>
const checkboxEls = document.querySelectorAll("[type='checkbox']");
for(let i = 0; i < checkboxEls.length; i++){
checkboxEls[i].checked = true;
}
</script>
그림 12-34 실행결과