오늘은 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] 자바스크립트 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 |