체크박스

제이쿼리

$(	function() {
	//테이블 이름이 파일마다 달라질 수 있으므로 jsp파일 내에 위치하는 것을 고려
	

    // 전체체크박스 선택시 전체 선택 및 해제													//#는 id, .는 클래스(동작하지 않는다면 로직으르 먼저 확인하고 이상 없으면  #, . 등이 빠졌는지 먼저 확인)
    $('#checkAll').click(function(){												//id가 checkAll인 태그가 체크 되었는지 확인. boolean. true또는 false 반환
		if($('#checkAll').is(':checked')){											//만약 체크 되어 있다면 class가 .rowCheck인 태그의 checked를 true로 설정
			$('.rowChk').prop('checked', true);
		}else{
			$('.rowChk').prop('checked', false);									//체크되어 있지 않다면 class가 .rowCheck인 태그의 checked를 false로 설정
		}
    });

    
    // 체크박스가 전체 체크되었을 경우 전체체크박스 선택 및 해제
    $('.rowChk').each(function(){													
		$(this).on('click', function(){												// 	on() 메소드는 주체가 되는 부모속성의 이벤트를 물려받아서 지정 선택자에게 이벤트를 연결할 수 있다. this는 현재 객체
			if($('#empListTableBody tr').length != $('.rowChk:checked').length){	//테이블 body의 tr개수와 체크된 개별 행의 개수가 다르다면 (*테이블 이름 주의. #또는 .를 빼먹지 않았는지 주의) 
				$('#checkAll').prop('checked', false);								// 전체체크의 checked를 false로 함으로서 전체 체크 해제
				}else{
					$('#checkAll').prop('checked', true);							//테이블 바디의 tr 개수와 체크된 개별 해의 개수가 같다면 전체체크의 checked를 true로 함.
   			}
		});
    });
});