본문 바로가기
jQuery

[jQuery] checkbox 이벤트

사악미소 2015. 12. 29. 00:14
반응형



[jQuery] checkbox 이벤트



 checkbox-1.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>체크박스 이벤트</title>
<style type="text/css">
    #termsContents {
        margin:0 auto;
        padding:10px;
        border:1px solid black;
        width:300px;
    }   

    h3 {
        text-align:center;
    }

    #agreement {
        margin:0 auto;
        width:300px;
        text-align:center;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

            // change : checkbox 또는 redio 입력태그의 선택값이 변경된 경우 발생하는 이벤트
            jQuery("#agreeCheck").change(function() {

                // is : checkbox 또는 redio 입력태그의 값을 얻어오는 메소드
                if(jQuery("#agreeCheck").is(":checked")) {

                    jQuery("joinBtn").focus();
                    jQuery("#checkValue").val("1");
                }
               
                else {

                    jQuery("#checkValue").val("0");
                }
            });
           
            jQuery("#joinBtn").click(function() {

                if(!jQuery("#agreeCheck").is(":checked")) {

                    alert("약관내용을 확인해 보시고 동의해 주세요.");
                    jQuery("#agreeCheck").focus();
                    return;
                }

                jQuery("#joinBtn").submit();
            });
        });
</script>
</head>
<body>
    <h1>체크박스 및 라디오 이벤트</h1>
    <hr/>
    <div id="termsContents">
        <h3>약관보기</h3>
        <p>약관내용....</p>
        <p>약관내용....</p>
        <p>약관내용....</p>
        <p>약관내용....</p>
        <p>약관내용....</p>
    </div>
    <div id="agreement">
        <form id="joinForm">
            <input type="hidden" name="check" id="checkValue" value="0">
            <p>
                <input type="checkbox" id="agreeCheck">
                약관에 동의하시겠습니까?
            </p>
            <button type="button" id="joinBtn">회원가입</button>
        </form>
    </div>
</body>
</html>
 출력결과



 checkbox-2.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>체크박스 이벤트</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        jQuery("#checkBoxBtn").click(function() {

            if(jQuery("#checkList").children(":checked").length == 0) {

                jQuery("#displayDiv").html("당신이 좋아하는 계절이 없습니다.");
                return;
            }
           
            var txt = "당신이 좋아하는 계절 : ";

            jQuery("#checkList").children(":checked").each(function(){
                txt += jQuery(this).val() + "&nbsp;";
            });
           
            jQuery("#displayDiv").html(txt);
        });
       
        jQuery("#allCheck").change(function() {

            if(this.checked) {

                jQuery("#displayLabel").text("선택취소");

                // prop : checkbox 또는 radio의 속성을 변경하는 메소드
                jQuery("#checkList").children().prop("checked", true);
            }
           
            else {

                jQuery("#displayLabel").text("전체선택");
                jQuery("#checkList").children().prop("checked", false);
            }
        });
    });
</script>
</head>
<body>
    <h1>체크박스 전체 선택 및 취소</h1>
    <hr/>
    <h3>좋아하는 계절을 선택해 주세요.(다중 선택 가능)</h3>
    <p>
        <input type="checkbox" id="allCheck">
        <label id="displayLabel">전체선택</label>
    </p>
    <div id="checkList">
        <input type="checkbox" value="봄">봄&nbsp;&nbsp;
        <input type="checkbox" value="여름">여름&nbsp;&nbsp;
        <input type="checkbox" value="가을">가을&nbsp;&nbsp;
        <input type="checkbox" value="겨울">겨울&nbsp;&nbsp;
    </div>
    <button id="checkBoxBtn">선택완료</button>
    <hr/>
    <div id="displayDiv"></div>
</body>
</html>

 출력결과01 - 처음 화면

 출력결과02 - 체크 후 선택 완료를 누른경우







반응형
저작자표시

'jQuery' 카테고리의 다른 글

[jQueyr] On / Off 이벤트  (0) 2016.01.03
[jQuery] input 이벤트  (0) 2015.12.29
[jQuery] jQuery 엘리먼트  (0) 2015.12.28
[jQuery] jQuesy 이벤트  (0) 2015.12.20
[jQuery] text 메소드와 html 메소드  (0) 2015.12.20

'jQuery' Related Articles

티스토리툴바