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 : 체크박스 체크여부 확인

단축키

단축키

유효한 링크인지 확인하는 JAVASCRIPT

[jQuery] 상위부터 차례로 지역 선택하기

Javascript - 이미지 미리보기 회전되어 나옴(EXIF)

javascript 인쇄 미리보기, 출력, 페이지 설정 등

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

날짜 및 시간 입력 구현하기, Bootstrap DateTimePicker

공백 검사 함수

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

'focus', 엔터 누르고 이동하자!

라디오버튼 선택 체크여부 radio checked

셀렉트(select) change Ajax 이벤트

input type file multiple list (파일 업로드 리스트 확인)

간단한 동적 SELECT 박스 구현하기

GET방식으로 전송시 특수문자함께 전송하는 방법

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

창 크기 최대화 시키기

[jQuery] 실시간 검색어 순위 순서대로 보여주기

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

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

랜덤 배너 노출 스크립트

로그인

다국어

검색

LANGUAGE

프로그램언어

프로그램언어

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

단축키

단축키

유효한 링크인지 확인하는 JAVASCRIPT

[jQuery] 상위부터 차례로 지역 선택하기

Javascript - 이미지 미리보기 회전되어 나옴(EXIF)

javascript 인쇄 미리보기, 출력, 페이지 설정 등

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

날짜 및 시간 입력 구현하기, Bootstrap DateTimePicker

공백 검사 함수

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

'focus', 엔터 누르고 이동하자!

라디오버튼 선택 체크여부 radio checked

셀렉트(select) change Ajax 이벤트

input type file multiple list (파일 업로드 리스트 확인)

간단한 동적 SELECT 박스 구현하기

GET방식으로 전송시 특수문자함께 전송하는 방법

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

창 크기 최대화 시키기

[jQuery] 실시간 검색어 순위 순서대로 보여주기

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

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

랜덤 배너 노출 스크립트