본문 바로가기
Coding/HTML & CSS

[HTML & CSS] input태그 체크박스(checkbox) 상태 확인하는 방법 !!

by 포스트it 2023. 3. 20.
728x90
반응형

 

[HTML & CSS] input태그 체크박스(checkbox) 상태 확인하는 방법 !!

상황에 맞게 잘 적용해서 사용하시면 됩니다 :)

 

예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>체크박스 체크 로직</h1>
    <input type="checkbox" id="myCheckbox" onclick="checkCheckbox()">
    <label for="myCheckbox">나를 체크해주세요</label>
    <p id="result"></p>
</body>
</html>
<script>
function checkCheckbox() {
    // 체크박스의 상태를 가져옵니다.
    const checkbox = document.getElementById('myCheckbox');
    const resultText = document.getElementById('result');
  
    // 체크박스의 상태를 확인하고 결과를 출력합니다.
    if (checkbox.checked) {
      resultText.textContent = '체크박스가 체크되었습니다!';
    } else {
      resultText.textContent = '체크박스가 체크되지 않았습니다.';
    }
  }
</script>

결과값

체크박스 체크 로직

728x90
반응형

댓글