HTML DOM의 input checkbox checked 속성은 웹 페이지에서 체크박스의 checked 속성 값을 읽어오거나 변경하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 체크박스의 선택 상태를 동적으로 제어할 수 있습니다.
구문(Syntax)
checked 속성의 기본 문법은 다음과 같습니다.
1. checked 값 반환하기
object.checked
체크박스가 선택되어 있으면 true, 선택되어 있지 않으면 false를 반환합니다.
2. checked 값 변경하기
object.checked = true|false
true를 대입하면 체크박스가 선택되고, false를 대입하면 선택이 해제됩니다.
예제(Example)
HTML DOM Input Checkbox checked 속성의 실제 동작을 확인해 보겠습니다. 아래 예제에서는 'Yes' 버튼을 누르면 체크박스가 선택되고, 'No' 버튼을 누르면 선택이 해제됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked property</title>
<style>
body{
text-align:center;
}
p{
font-size:1.5rem;
color:#ff8741;
}
input{
width:30px;
height:30px;
}
button{
background-color:#db133a;
color:#fff;
padding:8px;
border:none;
width:120px;
margin:0.5rem;
border-radius:50px;
outline:none;
}
</style>
</head>
<body>
<h1>checked Property Example</h1>
<p>Are you happy?</p>
<input type="checkbox">
<br>
<button onclick="yes()">Yes</button>
<button onclick="no()">No</button>
<script>
function yes() {
document.querySelector("input").checked = true;
}
function no() {
document.querySelector("input").checked = false;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'Yes' 버튼을 클릭하면 자바스크립트의 yes() 함수가 실행되어 체크박스에 체크가 표시됩니다.
이번에는 'No' 버튼을 클릭해 보세요. no() 함수가 실행되면서 체크박스의 선택이 해제됩니다.
정리
checked 속성은 체크박스의 현재 상태를 확인하거나 프로그래밍 방식으로 선택 상태를 전환할 때 매우 유용합니다. 폼 유효성 검사, 전체 선택 기능, 조건부 UI 처리 등 다양한 상황에서 활용할 수 있으니 꼭 익혀두시기 바랍니다.