✔ 체크박스 내 요소 접근 방법
-
체크박스 내에서 name 속성이 같은 요소들은 하나의 배열로 관리됨
-> 배열 이름은 name 속성명과 동일
-> 배열에 저장된 실제 데이터는 value 속성값과 동일
-> 체크박스 체크여부는
checked속성 통해서 접근- true : 체크
- false : 미체크
체크박스 중 첫번째 요소에 접근하여 value와 checked 속성값 출력
- name 속성이 hobby이므로 hobby라는 이름의 배열로 관리됨
⭐ 입력
<script>
function printCheckbox() {
let divInfoArea = document.querySelector("#infoArea");
divInfoArea.innerHTML =
document.fr.hobby[0].value + " : " + document.fr.hobby[0].checked;
}
</script>
<body>
<form name="fr">
취미 :
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="등산" checked="cheked">등산
<input type="checkbox" name="hobby" value="노래" checked="cheked">노래<br>
<input type="button" value="취미 체크완료" onclick="printCheckbox()">
</form>
<div id="infoArea"></div>
</body>📌 출력
배열 요소를 반복문으로 접근하여 각 요소의 값과 체크여부 확인
⭐ 입력(함수부분만 변경)
<script>
for(let i = 0; i < document.fr.hobby.length; i++) {
alert(document.fr.hobby[i].value + " : " + document.fr.hobby[i].checked);
}
for(hobby of document.fr.hobby) {
// for of문 사용 가능
// 위에 일반 for문이나 for of문 둘 중에 하나 사용!
alert(hobby.value + " : " + hobby.checked);
}
</script>📌 출력
- 알림창에 순서대로 출력됨
취미 항목을 하나도 선택하지 않았을 경우, "취미 선택 하나 이상 필수!" 출력하기
⭐ 입력(함수부분만 변경)
<script>
// if문 사용하기
let arrHobby = document.fr.hobby;
if(!arrHobby[0].checked && !arrHobby[1].checked && !arrHobby[2].checked) {
alert("취미 선택 하나 이상 필수!");
return;
}
// for문 사용하기
let isChecked = false; // 체크 상태 저장할 변수
for(hobby of document.fr.hobby) {
if(hobby.checked) {
isChecked = true;
}
}
if(!isChecked) {
alert("취미 선택 하나 이상 필수!");
return;
}
</script>📌 출력
- 하나도 체크 안 되어 있으면 알림창 뜸
전체 선택 체크 박스 상태에 따라 취미 항목 체크 상태를 일괄 변경
-
전체선택체크 시 게임, 등산, 노래 모두 체크-> true로 변경
-
전체선택해제 시 게임, 등산, 노래 모두 체크 해제-> false로 변경
-
단일 체크박스 항목인 경우에는 배열 사용하지 않음
⭐ 입력
<script>
// if문 사용
if(document.fr.hobbyAll.checked) {
document.fr.hobby[0].checked = true;
document.fr.hobby[1].checked = true;
document.fr.hobby[2].checked = true;
}else {
document.fr.hobby[0].checked = false;
document.fr.hobby[1].checked = false;
document.fr.hobby[2].checked = false;
}
// for문 사용
for(hobby of document.fr.hobby) {
hobby.checked = document.fr.hobbyAll.checked;
}
// 반복문을 통해 체크박스에 접근하면서
// 전체선택 체크 박스의 체크 상태를 각 체크박스 변경 항목으로 사용하면
// 공통 코드 하나로 true와 false 처리 가능
</script>
<body>
취미 :
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="등산">등산
<input type="checkbox" name="hobby" value="노래">노래
<input type="checkbox" name="hobbyAll" value="전체선택" onclick="checkAll()">
<br><br>
<input type="button" value="취미 체크완료" onclick="printCheckbox()">
</body>
개발자가 되었어요⭐️