JSP/javascript jQuery

[jQuery] Checkbox 제어, 사용법

도미노& 2018. 10. 23. 14:20
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());


출처: http://fruitdev.tistory.com/143?category=568934 [과일가게 개발자]