[Javascript] 자바스크립트 체크박스 체크 유/무 확인방법 & 예제

오늘은 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>
 
 

'JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 Array() 배열 사용법 & 예제 배열 선언 방법 (0)	2021.01.06
[Javascript] 제이쿼리 엘리먼트(Element) 존재 확인 사용법 & 예제 (0)	2020.09.23
[JavaScript] 자바스크립트 window.open() 새창 열기 기능 사용방법 & 예제 (0)	2020.05.08
[ Jquery ] 제이쿼리 실시간 검색어 자동완성 ajax 통신 방법 & 예제 (2)	2020.04.03
[Javascript] 자바스크립트 while()문 사용방법 & 예제, 반복문 빠져 나오는 방법 (0)	2020.03.23