hasClass를 이용한 약관동의 체크

제이쿼리 소스

$(document).ready(function(){

//

    $(".ico_chk").click(function(){

// 특정 클래스 클릭시

if ( $(this).hasClass("on") ){

//on 클래스가 있는지 확인해서 있다면 지우고

$(this).removeClass("on");

}else {

//on 클래스가 없다면 추가한다.

$(this).addClass("on");

}

    });

});

html 소스

<div class="check_agr">

<input id="termAgr" name="termAgr" type="checkbox" class="input_check">

<label for="termAgr" class="ico_chk"> 서비스 약관에 동의합니다.</label>

</div>

css 소스

.ico_check {

display: block;

width: 20px;

height: 20px;

background: url(/images/ico_1.png) no-repeat 0 0;

overflow: hidden;

font-size: 1px;

line-height: 0;

background-position: 0px 0px;

}

.ico_chk.on{

background-position: 0px -15px;

}

이미지 소스

ico_1.png

이렇게 하면 

약관 체크시

약관체그 해제시

요런 효과를 볼수 있다.