29. (jquery/제이쿼리) checkbox 체크박스 체크 상태 확인 - change 실시간 변경 감지 , is checked 체크 값 확인

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : jquery

---

[소스 코드]

 

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /*
        [JS 요약 설명]
        1. window.onload : 웹 브라우저 로드 완료 상태를 나타냅니다
        2. change : 특정 객체 상태 변경 상태를 확인합니다 (주로 폼 요소 상태 체크 - input, checkbox ..)
        3. $(this).is(":checked") : 체크박스가 체크된 상태를 확인합니다
        4. 참고 : 특정 태그 $("#check_1") 내에서 다시 태그를 지정시에는 this 를 사용해 지정할 수 있습니다
        */
        

        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("[window onload] : [start]");
            console.log("");

            // [실시간 체크박스 선택 이벤트 함수 호출]
            checkEvent();
        };


        /* [실시간 체크박스 선택 이벤트 함수] */
        function checkEvent(){
            console.log("");
            console.log("[checkEvent] : [start]");
            console.log("");

            // [body 내부에 선언된 체크박스 형태]
            // <input id="check_1" type="checkbox" style="display: none;"><label for="check_1"/>

            // [체크박스 ID 값 지정 >> change 상태 변경 감지]
            $("#check_1").change(function(){
                if($(this).is(":checked")){ // [체크된 상태]
                    console.log("");
                    console.log("[checkEvent] : [checked] : [OK]");
                    console.log("");
                    //alert("선택");
                }
                else { // [체크 해제된 상태]
                    console.log("");
                    console.log("[checkEvent] : [checked] : [NO]");
                    console.log("");
                    //alert("해제");
                }
            });
        };
                
    </script>

---

[결과 출력]

​

---

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹 브라우저 로드 완료 상태를 나타냅니다

2. change : 특정 객체 상태 변경 상태를 확인합니다 (주로 폼 요소 상태 체크 - input, checkbox ..)

3. $(this).is(":checked") : 체크박스가 체크된 상태를 확인합니다

4. 참고 : 특정 태그 $("#check_1") 내에서 다시 태그를 지정시에는 this 를 사용해 지정할 수 있습니다

*/

---