jQuery 체크박스(checkbox) 의 모든 것

jQuery 에서  input 타입이 체크박스(checkbox)일 경우에 체크박스를 클릭할때 체크 유무에 따라서 이벤트 발생하도록 하는 방법을 예로 설명하고자 합니다. 그리 어려운 방법은 아니지만 까끔 잊어버리기에 여기에 정리하고자 합니다.

 

우선 바로 아래의 소스코드를 보면 체크박스에 선택이 된 체크박스가 보일것 입니다.

<input type="checkbox"  name="checkValue" checked="checked">

 

checked 값을 비우고 한다면 선택이 되지 않은 상태로 보일것입니다.

<input type="checkbox" name="checkValue">

 

이 상태에서 체크박스를 선택할떄 일어나는 이벤트를 건다고 한다면..

<script>

// 예제 1

$('input[type=checbox]').click(function(){

소스코드1

});

 

// 예제 2

$('input[name=checkValue]').click(function(){

소스코드2

});

</script>

 

위의 예제와 같이 소스코드1에 해당하는 함수는 input 이라는 태그에서 타입이 체크박스에 해당되는 모든 것에 이벤트를 걸게 됩니다. 소스코드2의 함수는 input 태그에 네임이 checkValue 라는 것을 찾아서 이벤트를 걸게 됩니다. 즉 이름을 갖게 주지 않고는 하나의 체크박스에 이벤트가 걸리게 됩니다.

 

여기서는 하나의 input 체크박스에 이벤트를 걸었다고 할 경우를 생각해보겠습니다.

<script>

$('input[name=checkValue]').click(function(){

 var ischecked = $(this).attr('checked');
 if(ischecked){
      $('.img1').css('display', 'none');
      $('.img2').css('display', 'block');
 }else{
      $('.img1').css('display', 'block');
      $('.img2').css('display', 'none');
 }

});

</script>

 

위의 소스코드를 보면 체크박스의 체크 유무는 $(this).attr('checked') 으로 값을 가져올 수 있음을 알 수 있습니다. 그리고 그 값은 true, false 값이 되게 됩니다. 만일 체크박스가 선택이 된 상태라고 한다면 true 값을 가지게 되고 첫번째 조건이 실행되게 됩니다. 코드 내용은 클래스 이름이 img1 이라는 부분의 화면을 보이지 않게 하고 img2 라는 클래스 부분의 화면을 보이도록 합니다. 그리고 체크박스가 선택이 되지 않은 상태는 이와 반대가 되게 보이도록 하는 소스코드임을 알 수 있습니다.

 

참고로 체크박스의 값이 form 태그로 전송이 되었을 경우에 값이 있다면 해당 체크박스의 이름으로 값이 on 이라는 값이 들어가게 됩니다. 만일 체크박스의 값이 없다면 체크박스의 이름으로 값이 전송되지 않습니다.

 

또한 여러개의 체크박스중에 선택된 것만을 선택한다고 한다면 $('input[type=checkbox]:checked') 라는 선택자를 사용할 수 있습니다.

 

// 체크되었는지 true, false 값을 반환 받습니다.

$('input:checkbox[name=NAME]').is(':checked')

 

// 체크박스의 값은 false 으로 합니다. 주의할 점은 true, false 값은 문자열이 아닌 값입니다.

$('input:checkbox[name=NAME]').attr('checked', false);

 

// 이 부분은 특정 라디오 버튼의 값이 특정한 값인것의 버튼을 선택되어지게 합니다.

$("input:radio[name='NAME']:radio[value='VALUE']").attr("checked",true);

 

// 라디오 버튼의 선택된것을 취소합니다.

$("input:radio[name='NAME']").removeAttr("checked");