본문 바로가기

Language/JQuery

[jQuery] Checkbox 제어, 사용법

반응형

이전 포스팅에서 SelectBox를 제어하는 방법에 대해 포스팅 하였는데, 이번에는 Checkbox를 제어해 보자.
Checkbox는 selectBox에 비해 내용이 몇개 없으므로 간단하게 설명하겠다.




1. 체크여부 확인

   - id가 동일한 체크박스에 대하여 선택되어 있는지 확인 : true / false 반환
   $("#chkBox").is(":checked") ;
   $("input:checkbox[id='chkBox']").is(":checked") ;


   * 1.6이상일때 권장 사용법
   $("#chkBox").prop("checked") ;




2. 체크박스 갯수 가져오기

  - 선택된 체크박스 갯수 구하기
  $("#chkBox:checked").length ;

  - 전체 체크박스 갯수 구하기
  $("#chkBox").length ;




3. 체크박스 전체 선택하기 / 해제하기

  - 전체 선택하기
  $("#chkBox").prop('checked', true) ;
  $("#chkBox").attr('checked', true) ;


  - 전체 해제하기
  $("#chkBox").prop('checked', false) ;
  $("#chkBox").attr('checked', false) ;



4. 체크된 체크박스 value 가져오기

   $('#chkBox:checked').each(function() {
        alert($(this).val());
   });



5. 체크박스 클릭시 이벤트 주기

   function msgAlert(){
        alert('1');
   }

   $("#chkBox" ).on( "click", msgAlert());