javascript - Checkbox : 체크박스 체크여부 확인

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>check박스 체크 여부 확인하기</title>

  <script type="text/javascript">
    function CheckForm(Join){

        //체크박스 체크여부 확인 [하나]
        var chk1=document.frmJoin.U_checkAgreement1.checked;
        var chk2=document.frmJoin.U_checkAgreement2.checked;

        if(!chk1){
            alert('약관1에 동의해 주세요');
            return false;
        }
        if(!chk2) {
            alert('약관2에 동의해 주세요');
            return false;
        }

        //체크박스 체크여부 확인 [동일 이름을 가진 체크박스 여러개일 경우]
        var isSeasonChk = false;
        var arr_Season = document.getElementsByName("SEASON[]");
        for(var i=0;i<arr_Season.length;i++){
            if(arr_Season[i].checked == true) {
                isSeasonChk = true;
                break;
            }
        }

        if(!isSeasonChk){
            alert("계절의 종류를 한개 이상 선택해주세요.");
            return false;
        }

    }

</script>
</head>
<body>


<form name="frmJoin" action=""  onSubmit="return CheckForm(this)">
    <input type="checkbox" name="U_checkAgreement1" id="U_checkAgreement1" value="" /> 약관동의
    <input type="checkbox" name="U_checkAgreement2" id="U_checkAgreement2" value="" /> 약관동의

    <br/>
    <br/>
    <input type="checkbox" id="spring" name="SEASON[]" value="1" />봄
    <input type="checkbox" id="summer" name="SEASON[]" value="2" />여름
    <input type="checkbox" id="fall" name="SEASON[]" value="3" />가을
    <input type="checkbox" id="windter" name="SEASON[]" value="4" />겨울
    <br/>
    <br/>
    <input type="submit" value="전송">
</form>

</body>
</html>

jQuery로 변경

[코드]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

        //체크박스 체크여부 확인 [동일 이름을 가진 체크박스 여러개일 경우]
        /*var isSeasonChk = false;
        var arr_Season = document.getElementsByName("SEASON[]");
        for(var i=0;i<arr_Season.length;i++){
            if(arr_Season[i].checked == true) {
                isSeasonChk = true;
                break;
            }
        }*/

        //jQuery로 변경
        var isSeasonChk = $("input:checkbox[name='SEASON[]']").is(":checked");

        if(!isSeasonChk){
            alert("계절의 종류를 한개 이상 선택해주세요.");
            return false;
        }

프로그램언어

프로그램언어

Checkbox : 체크박스 체크여부 확인

단축키

단축키

예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar)

마우스 드래그, 오른쪽 팝업메뉴, 선택 막기 (IE11, 파이어폭스, 크롬 확인)

Checkbox : 체크박스 체크여부 확인

텍스트박스(input type = "text") 숫자 증가, 감소 시키기 - 쇼핑몰 주문 수량

정규식을 이용한 콤마(comma) 제거하기

정규식을 이용한 실시간 콤마(comma) 넣기

자바스크립트로 네트워크 연결 확인하기 (Navigator onLine Property)

location.href 로 새창 여는 방법 (target=_blank 효과)

CheckBox 전체 선택 & 해제

선택(CheckBox) 된 Row 삭제 - 화면에서 추가된 Row

선택된 데이터 부모창에 넘기기 (iframe ☞ 부모창)

2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현

jquery 메뉴 - 아래로 한번에 전체가 펼처짐

자바스크립트 이벤트 목록입니다. ( javascript event )

'레이블', 반복문을 제어하자!

'Array', 배열 및 다차원 배열 선언에 대해 알아보자!

배열의 리터럴 선언, 또다른 배열 선언 방법!

'문자 ↔ 숫자', 타입을 바꿔보자!

드롭다운 메뉴를 만들어보자! -1탄

'onmouseover', 마우스 오버 효과 - 글씨 바꾸기!

로그인

다국어

검색

LANGUAGE

프로그램언어

프로그램언어

Checkbox : 체크박스 체크여부 확인

단축키

단축키

예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar)

마우스 드래그, 오른쪽 팝업메뉴, 선택 막기 (IE11, 파이어폭스, 크롬 확인)

Checkbox : 체크박스 체크여부 확인

텍스트박스(input type = "text") 숫자 증가, 감소 시키기 - 쇼핑몰 주문 수량

정규식을 이용한 콤마(comma) 제거하기

정규식을 이용한 실시간 콤마(comma) 넣기

자바스크립트로 네트워크 연결 확인하기 (Navigator onLine Property)

location.href 로 새창 여는 방법 (target=_blank 효과)

CheckBox 전체 선택 & 해제

선택(CheckBox) 된 Row 삭제 - 화면에서 추가된 Row

선택된 데이터 부모창에 넘기기 (iframe ☞ 부모창)

2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현

jquery 메뉴 - 아래로 한번에 전체가 펼처짐

자바스크립트 이벤트 목록입니다. ( javascript event )

'레이블', 반복문을 제어하자!

'Array', 배열 및 다차원 배열 선언에 대해 알아보자!

배열의 리터럴 선언, 또다른 배열 선언 방법!

'문자 ↔ 숫자', 타입을 바꿔보자!

드롭다운 메뉴를 만들어보자! -1탄

'onmouseover', 마우스 오버 효과 - 글씨 바꾸기!