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	반복문 사용할때 태그 식별하기 data-item	2018.07.04	1849
106	배너 램덤으로 부여주기	2014.03.01	5911
105	배열과 Array객체	2019.01.16	1051
104	배열의 리터럴 선언, 또다른 배열 선언 방법!	2015.02.03	6408
103	버튼 삭제	2015.02.03	5951
102	복사방지+드래그금지+마우스우클릭 금지	2016.12.22	7911
101	부드럽게 페이지 이동하기	2016.09.11	6003
100	브라우저별 이미지 크기 변경	2016.11.17	7928
99	비동기 작업의 원리 (JavaScript 엔진, Web API, Task Queue, Event Loop)	2023.01.20	138
98	새로고침(F5) 금지	2018.03.28	6001
97	새창을 띠워서 focus주기	2014.03.01	5715
96	샘플) top left menu	2014.03.01	5513
95	선택(CheckBox) 된 Row 삭제 - 화면에서 추가된 Row	2015.04.28	13541
94	선택된 select 의 option 값을 다른 select로 넘겨주기	2014.03.01	5668
93	선택된 데이터 부모창에 넘기기 (iframe ☞ 부모창)	2015.04.28	6614
92	셀렉트(select) change Ajax 이벤트	2016.12.23	12585
91	셀렉트(select) change href 이벤트	2016.12.23	5899
90	셀렉트(select) change 이벤트 (split)	2016.12.23	6009
89	스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징)	2018.07.04	2715
88	스마트에디터(SmartEditor)에서 textarea 유효성 체크하기	2018.07.04	3989

107

반복문 사용할때 태그 식별하기 data-item

2018.07.04

1849

106

배너 램덤으로 부여주기

2014.03.01

5911