고똘이의 IT 개발이야기

오늘은 html의 checkbox(체크박스)에 체크 혹은 미체크로 되어있는지 확인하는 방법에 대해서 설명 드리겠습니다.

 

설명

1. 'next'라는 id를 가진 버튼을 클릭 시 'chk1', 'chk2'의 id를 가진 체크박스가 체크가 되어 있는지 체크.

'$("#chk1").is(":checked")'함수가 'true'가 나오면 체크가 되어 있다는 표시입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<head>
    <script>
        // 다음 버튼 클릭
        $("#next").click(function(){
            
            // 첫번째 체크박스가 체크되어 있는경우
            if($("#chk1").is(":checked")){
                alert("첫번째 통과");
                
            } else { // 첫번째 체크박스가 체크 되어있지 않은 있는경우
                alert("첫번째 항목을 체크 해주세요.")
                return false;
            }
            
            // 두번째 체크박스가 체크되어 있는경우
            if($("#chk2").is(":checked")){
                alert("두번째 통과");
            } else { // 두번째 체크박스가 체크 되어있지 않은 있는경우
                alert("두번째 항목을 체크 해주세요.");
                return false;
            }
            
            location.href="https://naver.com";
        });
    </script>
</head>
<html>
    <body>
        <input type="checkbox" class="arrChk" id="chk1">
        <input type="checkbox" class="arrChk" id="chk2">
    </body>
</html>
 
 

 

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band