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;
        }

Atachment
첨부 '3'	2014-09-30_010517.png, 2014-09-30_010534.png, 2014-09-30_010549.png,

List of Articles
번호	제목	날짜	조회 수
107	예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar)	2015.06.19	10315
106	마우스 드래그, 오른쪽 팝업메뉴, 선택 막기 (IE11, 파이어폭스, 크롬 확인)	2015.06.19	8657
»	Checkbox : 체크박스 체크여부 확인	2015.06.19	19107
104	텍스트박스(input type = "text") 숫자 증가, 감소 시키기 - 쇼핑몰 주문 수량	2015.06.19	12403
103	정규식을 이용한 콤마(comma) 제거하기	2015.06.19	6895
102	정규식을 이용한 실시간 콤마(comma) 넣기	2015.06.19	7950
101	자바스크립트로 네트워크 연결 확인하기 (Navigator onLine Property)	2015.06.19	6383
100	location.href 로 새창 여는 방법 (target=_blank 효과)	2015.06.19	9589
99	CheckBox 전체 선택 & 해제	2015.04.28	5689
98	선택(CheckBox) 된 Row 삭제 - 화면에서 추가된 Row	2015.04.28	13619
97	선택된 데이터 부모창에 넘기기 (iframe ☞ 부모창)	2015.04.28	6697
96	2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현	2015.04.06	8380
95	jquery 메뉴 - 아래로 한번에 전체가 펼처짐	2015.04.06	11815
94	자바스크립트 이벤트 목록입니다. ( javascript event )	2015.04.06	5651
93	'레이블', 반복문을 제어하자!	2015.02.03	5612
92	'Array', 배열 및 다차원 배열 선언에 대해 알아보자!	2015.02.03	11209
91	배열의 리터럴 선언, 또다른 배열 선언 방법!	2015.02.03	6515
90	'문자 ↔ 숫자', 타입을 바꿔보자!	2015.02.03	6314
89	드롭다운 메뉴를 만들어보자! -1탄	2015.02.03	8302
88	'onmouseover', 마우스 오버 효과 - 글씨 바꾸기!	2015.02.03	9546

107

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

2015.06.19

10315

106

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

2015.06.19

8657